JS跨域解决方案之使用CORS实现跨域

下面进行详细讲解“JS跨域解决方案之使用CORS实现跨域”的完整攻略。

什么是跨域？

在Web中，通常浏览器执行JavaScript脚本是受到同源策略的限制，即一个源(域名、协议、端口)下的文档或脚本，无法访问另一个源下的资源。这种限制被称为“跨域”。

CORS的介绍

CORS(Cross-Origin Resource Sharing)即跨源资源共享，是一种机制，允许位于一个域名下的Web应用请求访问另一个域名下的资源。该机制在许多现代浏览器中被实现，使得web应用可以通过在服务端设置一些特定的HTTP头来完成跨域的访问控制。

CORS的使用方法

服务器端的配置

在服务端，可以通过设置Response Header，来控制CORS访问。最主要的设置是Access-Control-Allow-Origin这个Header。

当客户端发起请求时，服务端响应这个请求，如果设置了Access-Control-Allow-Origin Header，并且该Header的值允许了客户端的域名，则该请求将得到响应。以下是允许所有域名的配置。

Access-Control-Allow-Origin: *

还有其他一些Header需要设置，例如：

• Access-Control-Allow-Headers：指定了由浏览器允许发送的Header列表。
• Access-Control-Expose-Headers：指定了响应中暴露给前端JavaScript的Header列表。

服务器端示例代码如下：

const http = require('http');

http.createServer((request, response) => {
  // 设置允许跨域的源
  response.writeHead(200, {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': 'Content-Type',
    'Access-Control-Expose-Headers': 'Token',
  });

  response.end('Hello CORS');
}).listen(3000);

客户端的请求

客户端向服务端请求时，需要设置withCredentials=true，将Cookie带上，否则服务端无法获取到Cookie。

客户端所在的源既可以是HTTP，也可以是HTTPS。

客户端示例代码如下：

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('GET', 'http://example.com:3000');
xhr.onload = function() {
  console.log('Response from CORS', xhr.responseText);
};
xhr.send(null);

进一步说明

通常，跨域的解决方案还有JSONP等方法，但CORS可以算是现代浏览器默认的跨域解决方案了。当然，CORS也有一些限制和必要的安全考虑，需要结合实际情况进行使用。

示例说明：

下面给出两个使用CORS的实例说明。

1. 前端向服务端请求数据

在客户端发送请求时，需要将withCredentials设置为true，以便服务端能够获取到请求中的Cookie。

客户端代码：

fetch('http://example.com:3000/data', {
  method: 'GET',
  credentials: 'include'
})
.then(res => res.json())
.then(data => {
  console.log('Response from server', data);
})
.catch(err => {
  console.error(err);
});

服务端代码：

const http = require('http');

http.createServer((req, res) => {
  if (req.url === '/data') {
    res.writeHead(200, {
      'Access-Control-Allow-Origin': 'http://example.com:8000',
      'Access-Control-Allow-Credentials': 'true'
    });
    res.end(JSON.stringify({
      name: 'hello'
    }));
  }
}).listen(3000);

当客户端向服务端请求时，服务端将Access-Control-Allow-Origin设置为'http://example.com:8000'，这样只有来自'http://example.com:8000'域名的请求才能访问服务端资源。

1. 浏览器访问数据接口

通过服务端设置Access-Control-Allow-Origin，可以让浏览器跨域读取服务端返回的数据。

客户端代码：

http://example.com:3000/data

这样浏览器就可以访问'http://example.com:3000/data'这个接口，并且从Response Header中获取到Access-Control-Allow-Origin的值。

服务端代码：

const http = require('http');

http.createServer((req, res) => {
  if (req.url === '/data') {
    res.writeHead(200, {
      'Access-Control-Allow-Origin': 'http://example.com:8000'
    });
    res.end(JSON.stringify({
      name: 'world'
    }));
  }
}).listen(3000);

当浏览器请求'http://example.com:3000/data'时，服务端将Access-Control-Allow-Origin设置为'http://example.com:8000'，使浏览器可以跨域读取数据。