How to use Axios to send JSONP cross-domain authentication in Vue

Source: Internet
Author: User
Tags script tag

Https://cnodejs.org/topic/5930430f03dba3510d8a62c6

    1. Server-side Settings Res.header ("Access-control-allow-origin", "*") when using Axios to send requests, results can be obtained correctly

    2. 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 ago

Put the code out of your request section to see

From the cool cnodemd

Justbecoder 2 floor? 2 months agoauthor
InheritedVue.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")               
Justbecoder 3 floor? 2 months agoauthor

@cctv1005s you look at the code.

178220709 4 floor? 2 months ago

Problem-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 ago

Not the same. From the cows read

Chanywn 10 floor? 2 months ago

Cross-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 ago

JSONP 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.