ajax跨域请求

Posted 你七啊?

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax跨域请求相关的知识,希望对你有一定的参考价值。

跨域请求 首先先了解什么是跨域?

浏览器同源策略:规定浏览器只能访问同源的资源,不能访问对方的资源。(非授权情况下)

域相同和不同域

满足同域的条件:同协议 同域名 同端口 http://www.foo.com/a/ 和http://www.foo.com 同域

与http://www.foo.com不同域,如https://www.foo.com 协议不同;http://www.foo.com:8080 端口不同;http://www.foo 域名不同

 

ajax跨域

方法论 

 jsonp,通过设置ajax中的dataType为jsonp demo如下:

$.ajax({
       url: "xxx",
       dataType: "jsonp",
       jsonp:callback,  
       jsonpCallback:"successCallback",

       success:function(json){
       var data = eval(json);
                                 
     }
   });

和一般的ajax请求不同的多了个jsonpCallback ;这个是设置访问成功后的回调函数的名称,同时在服务器代码返回的json数据必须要使用jsonpCallback 设置的函数名括起来如successCallback(json数据)

这样ajax请求返回数据时才能成功调用success函数(后台没设置的话会返回会跑到error里)。

当然 如果在js 中successCallback(data)函数,会直接调用这个函数,也能获取到json.

 

理论

 

以上是关于ajax跨域请求的主要内容,如果未能解决你的问题,请参考以下文章

Express实战 - 应用案例- realworld-API - 路由设计 - mongoose - 数据验证 - 密码加密 - 登录接口 - 身份认证 - token - 增删改查API(代码片段

如何发送跨域ajax请求[重复]

跨域请求如何携带cookie?不小心都拿了Offer

vue工程本地代码请求http发生跨域提示错误解决方法

VSCode自定义代码片段14——Vue的axios网络请求封装

VSCode自定义代码片段14——Vue的axios网络请求封装