跨域资源共享 CORS 的简要概述

Question

CORS 是一种协议，可帮助浏览器确定向不同来源发出 HTTP 请求是否安全。 浏览器限制来自 JavaScript 的跨域请求，所以如果你使用 fetch() 或 Axios 向 不使用 CORS 的 Express 服务器 发起请求，您将看到以下错误消息：

Access to fetch at 'http://localhost:3000/'
from origin 'http://localhost:5000'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
header is present on the requested resource.
If an opaque response serves your needs,
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

什么是跨域？

您可以将您的来源视为浏览器的 URL 栏中显示的内容。 假设您打开了一个浏览器选项卡 http://localhost:5000/tutorials/fundamentals/pojo。

以下被视为跨域请求：

1. https://localhost:5000/test - 不同的协议， http 对比 https
2. http://localhost:3000/test - 不同的端口， 3000 对比 5000
3. http://google.com:5000/test - 不同的主机， localhost 对比 google.com

换句话说，任何协议、主机和端口与 URL 栏中的内容不匹配的请求都被视为跨域请求。

设置 CORS 支持

您需要在服务器上设置 CORS，例如使用 cors Express 插件 。 如果您尝试向您无权访问的服务器发出 HTTP 请求，则唯一的选择是创建代理。

大多数浏览器 预检请求 使用 HTTP OPTIONS 请求方法（相对于 GET 或者 POST) 检查 CORS 标头。 为了支持 CORS，您的服务器需要处理 OPTIONS 请求并设置 Access-Control-Allow-Origin 响应的标题。

通常你只会 使用 cors npm module ，但是这个例子展示了如何通过简单地设置响应头来支持跨域请求，这在任何 Web 框架中都应该很容易。

const app = require('express')();

// Need to handle 'OPTIONS' requests for pre-flight
app.options('*', (req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
  res.send('ok');
});

// As well as set 'Access-Control-Allow-Origin' on the actual response
app.get('/', (req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
  res.send('Hello, World!')
});
const server = await app.listen(3000);