同源策略
同源策略分为 DOM 和 XHR 两种,其中 DOM 同源策略对 <iframe>
有所限制。
跨域访问
因为浏览器的同源策略,在有访问不同域名的资源的需求时会造成一定的阻碍,这时需要根据具体情况采取一些手段才能达到目的。
跨域资源共享
英文全称为「cross-origin resource sharing」,简称「CORS」。此方式用于在浏览器中发起跨域的 AJAX 请求,主要依赖于服务端在响应头中设置 Access-Control-Allow-Origin
。
如果是允许所有来源的请求访问,使用通配符 *
:
Access-Control-Allow-Origin: *
若只允许某个来源,则要指明来源域名:
Access-Control-Allow-Origin: https://api.ourai.ws
在很多情况下,发送请求时需要附带 Cookie 等信息给服务端,这时就必须得指定来源域名了,并且还要在响应头中设置 Access-Control-Allow-Credentials
:
Access-Control-Allow-Origin: https://api.ourai.ws
Access-Control-Allow-Credentials: true
另外,发送请求的 JavaScript 代码也需要做出相应的改变:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.ourai.ws/posts', true);
xhr.withCredentials = true; // 这个一定要设置
xhr.onreadystatechange = function() {
// ...
}
xhr.send();
若是使用 jQuery 发送请求:
$.ajax({
url: 'https://api.ourai.ws/posts',
type: 'GET',
xhrFields: {
withCredentials: true
},
success: function() {
// ...
}
});