同源策略

同源策略分为 DOM 和 XHR 两种,其中 DOM 同源策略对 <iframe> 有所限制。

跨域访问

因为浏览器的同源策略,在有访问不同域名的资源的需求时会造成一定的阻碍,这时需要根据具体情况采取一些手段才能达到目的。

跨域资源共享

英文全称为「cross-origin resource sharing」,简称「CORS」。此方式用于在浏览器中发起跨域的 AJAX 请求,主要依赖于服务端在响应头中设置 Access-Control-Allow-Origin

如果是允许所有来源的请求访问,使用通配符 *

  1. Access-Control-Allow-Origin: *

若只允许某个来源,则要指明来源域名:

  1. Access-Control-Allow-Origin: https://api.ourai.ws

在很多情况下,发送请求时需要附带 Cookie 等信息给服务端,这时就必须得指定来源域名了,并且还要在响应头中设置 Access-Control-Allow-Credentials

  1. Access-Control-Allow-Origin: https://api.ourai.ws
  2. Access-Control-Allow-Credentials: true

另外,发送请求的 JavaScript 代码也需要做出相应的改变:

  1. var xhr = new XMLHttpRequest();
  2. xhr.open('GET', 'https://api.ourai.ws/posts', true);
  3. xhr.withCredentials = true; // 这个一定要设置
  4. xhr.onreadystatechange = function() {
  5. // ...
  6. }
  7. xhr.send();

若是使用 jQuery 发送请求:

  1. $.ajax({
  2. url: 'https://api.ourai.ws/posts',
  3. type: 'GET',
  4. xhrFields: {
  5. withCredentials: true
  6. },
  7. success: function() {
  8. // ...
  9. }
  10. });

JSONP

服务器代理

window.name 配合 <iframe>

window.postMessage()

修改 document.domain 跨子域

WebSocket