Https://cnodejs.org/topic/5930430f03dba3510d8a62c6
Server-side Settings Res.header ("Access-control-allow-origin", "*") when using Axios to send requests, results can be obtained correctly
When the server side is not set to allow cross-domain, the use of Jsonp way to send is not, the prompt error is as follows
XMLHttpRequest cannot load http://localhost:3000/axios?cb=cb. No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘null‘ is therefore not allowed access.That little buddy in Vue uses Axios to send cross-domain requests, please enlighten!
12 replies.cctv1005s 1 floor? 2 months agoPut the code out of your request section to see
From the cool cnodemd
Justbecoder 2 floor? 2 months agoauthorInheritedVue.Prototype.$http=Axios;Instantiation ofVarVm= New Vue({El: ' #box ',Data: { },Created:function(){Console.log (111);This.Hello(); },Methods: {Hello: function(){ This.$http.Get(' HTTP://LOCALHOST:3000/AXIOS?CB=CB ',{ Withcredentials:true }).Then(function(Data,msg) { Console. Logdata Console.< Span class= "PLN" >log (msgcatch (function (err< Span class= "pun") { Console. Logerr} }< Span class= "pun") @cctv1005s you look at the code.
178220709 4 floor? 2 months agoProblem-solving ideas are problematic, jsonp off Vue What's the matter? Find Axios to go: Https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp finally said a few points: 1.jsonp as the need for service-side support, why not cors it? 2. It is not recommended to bind Ajax and Vue together, 3. I used the swagger code generation template to encapsulate all Ajax with a layer of promise, blocking out the AJAX call process, and only promise (the interface) is stable and relies on abstraction rather than implementation.
Justbecoder 5 floor? 2 months agoauthor@178220709 you said this JSONP module I have realized, I feel that he and Axios have no relationship
Justbecoder 6 floor? 2 months agoauthor@178220709 in Vue 2.0 does the government also recommend using Axios for data requests?
178220709 7 floor? 2 months ago@justbecoder Vue officially recommended Axios because it's an excellent AJAX library, not that it should be tied to Vue, and that Vue-resource's strange conventions do not actually bring any benefits, and Vue and Axios have no relevance or repulsion. , should try to keep separation of duties,
178220709 8 floor? 2 months ago@justbecoder Axios does not support JSONP, this is the official express, if you want to use JSONP, then do not use it.
And think, if you later need to upgrade JSONP to Cors, that is not to change the code everywhere, but if you package into promise, you can replace the promise inside the specific implementation,
This is why software development should rely on abstraction rather than concrete
At the back end, this should be an entry-level idea, but at the front end, many people are not aware of it.
Afterthreeyears 9 floor? 2 months agoNot the same. From the cows read
Chanywn 10 floor? 2 months agoCross-domain resource sharing (CORS)
Https://blog.codefun.cn/blog/access-control-allow-origin
Http://www.ruanyifeng.com/blog/2016/04/cors.html
cctv1005s 11 floor? 2 months agoJSONP essentially adds a script tag to the browser, because the SRC in script does not take into account cross-domain issues. Because Axios does not support JSONP, if you do not use jquery Ajax, you can consider your own encapsulation of a, and not trouble, like this.
<! DOCTYPE html> <title>Test</title> <meta CharSet="Utf-8" /><body><script Type="Text/javascript"> Baidu Suggets API VarS= "Https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=132&json=1"; VarFetchjsonp= function(Url){ VarBody=Document.getElementsByTagName(' Body ')[0]; Insert a script VarScript=Document.CreateElement(' Script ');Script.SetAttribute(' SRC ',wr.);Body.AppendChild(Script); } In order to comply with the Baidu query API set up an objectWindow.Baidu= {}; //script will call this function after loading, SUG is suggest content window baidu.= function (sug< Span class= "pun") { Console. Logsug} //call Fetchjsonp ( Span class= "PLN" >s); </script></body> </HTML> This is I call Baidu's suggest interface implementation, very simple.
Justbecoder 12 floor? 2 months agoauthor@cctv1005s 3Q
How to use Axios to send JSONP cross-domain authentication in Vue
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
