Ajax跨域问题

由于JS同源策略的影响,因此js只能访问同域名下的文档,当我们用ajax请求某个别人提供的接口时,可能存在跨域问题,导致接口无法访问,这里有一些解决方案。

同源策略

百度的解释:

同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。

跨域报错信息

Origin null is not allowed by Access-Control-Allow-Origin

解决方案

在服务端填上响应头

response.setHeader("Access-Control-Allow-Origin","*"); 
response.setHeader("Access-Control-Allow-Methods:GET,POST");

*号表示所有的域都接受,HTML5中提供的XMLHTTPREQUEST Level2(即XHR2)已经实现了跨域访问,添加上这些即可。

目前遇到的一个跨域问题使用这个方法解决了,只添加了第一条。

另一种解决方案

JSONP(JSON with Padding)

JSONP还需要去理解,这里先记个笔记,可无视。。。不保证记录的正确性。

百度百科

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

 $.ajax({  
    url: "http://异域IP:port/getSomeData.do",  
    dataType: "jsonp",  
    jsonpCallback: "callbank",  //设置一个回调函数,请求的JSON将会被包裹在callback()内
    success: function(data) {
    //...
    }  
 });  
 function callbank(data) {  
     console.log(data);  
 }

JSONP对于GET适用,对于POST并没有完美支持,也需在服务端添上相应头,下面两行代码都需要。

response.setHeader("Access-Control-Allow-Origin","*"); 
response.setHeader("Access-Control-Allow-Methods:GET,POST");

Licensed under CC BY-NC-SA 4.0
本文链接:http://JohnneyAnn.github.io/2017/09/08/AjaxCrossDomain/