理解CORS需先懂同源策略，一文详解其工作原理与解决办法

同源策略

要理解 CORS，我们首先需要了解同源策略。此策略是 Web 浏览器中的一项基本安全措施，用于限制从一个来源加载的文档或脚本如何与来自另一个来源的资源进行交互。来源由协议、域和端口的组合定义。

例如：

为什么存在 CORS

引入 CORS 是为了允许服务器指定哪些来源可以访问其资源，从而以受控的方式放宽同源策略。这对于经常需要向托管在不同域上的 API 发出请求的现代 Web 应用程序至关重要。

常见 CORS 错误

开发人员在尝试从 Web 应用程序向其他域上的 API 发出请求时经常会遇到 CORS 错误。典型的 CORS 错误可能如下所示：

Access to fetch at 'https://api.example.com/data' from origin 'https://myapp.com' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present 
on the requested resource.

CORS 的工作原理

当 Web 应用程序发出跨源请求时：

浏览器发送请求时附带一个标头，指定请求页面的来源。然后服务器可以响应：

3. 如果服务器的响应不包含适当的 CORS 标头，浏览器将阻止响应。

解决 CORS 问题

1. 服务器端配置

解决 CORS 问题的最正确方法是配置服务器以发送正确的 CORS 标头。这通常涉及：

使用 的 Node.js 示例：

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({
  origin: 'https://myapp.com'
}));

2. 使用代理

如果您无法控制服务器，则可以设置代理服务器来添加必要的 CORS 标头。这通常在开发环境中完成。

使用 Vue App 的代理功能的示例：

在.json：

{
  "proxy": "https://api.example.com"
}

3. JSONP（仅适用于 GET 请求）

JSONP（带填充的 JSON）是一种较旧的技术，它可以通过使用不受同源策略约束的脚本标签来绕过 GET 请求的 CORS。

function handleResponse(data) {
  console.log(data);
}
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

注意：JSONP 被认为是过时的，并且不如正确的 CORS 实现安全。

最佳实践了解安全隐患：不要盲目绕过 CORS。它的存在是有原因的。使用特定来源：避免*在--Allow-生产中使用。指定确切的允许来源。使用特定于环境的配置：对开发和生产环境有不同的 CORS 设置。处理预检请求：对于非简单请求，正确处理 请求。牢记安全：请记住，CORS 是由浏览器强制执行的。服务器端安全措施仍然是必要的。最后

如果您遇到 CORS 问题，第一步是确定您是否可以控制服务器。如果可以，实施适当的 CORS 标头是最好的解决方案。如果没有，请考虑使用代理，或者作为简单 GET 请求的最后手段，使用 JSONP。

CORS 请求 服务器 使用 来源 可以