【极简 亲测】已拦截跨源请求：同源策略禁止读取位于....的远程资源。（原因：CORS 头缺少 ‘Access-Control-Allow-Origin‘）

**已拦截跨源请求：同源策略禁止读取位于...的远程资源**

在 web 开发中，我们经常会遇到一个问题：如何让 JavaScript 脚本能够从不同域名的服务器上获取数据。这个问题的答案就是 CORS（Cross-Origin Resource Sharing），即跨源资源共享。

**什么是同源策略？**

同源策略是一种安全机制，规定浏览器只能从相同的域名、协议和端口读取资源。如果请求来自不同域名、协议或端口，浏览器会拦截该请求，并抛出一个错误。

**什么是 CORS？**

CORS 是一种机制，让服务器能够告知浏览器哪些资源可以被访问。通过设置特定的 HTTP 头部信息，服务器可以告诉浏览器，从哪些域名、协议和端口可以读取资源。

**为什么需要 CORS？**

在传统的同源策略下，如果 JavaScript 脚本从不同域名的服务器上获取数据，浏览器会拦截该请求，并抛出一个错误。这种限制使得开发者难以实现一些功能，如：

* 从第三方 API 获取数据* 使用第三方库或服务* 实现单页应用（SPA）的路由跳转**如何配置 CORS？**

配置 CORS 需要在服务器端设置特定的 HTTP 头部信息。以下是常见的步骤：

1. **定义允许访问的域名**: 在服务器端，需要定义哪些域名可以被访问。
2. **设置 Access-Control-Allow-Origin 头部**: 设置这个头部，让浏览器知道哪些域名可以被访问。
3. **设置其他 CORS 头部信息**: 可选项，根据具体需求，可以设置其他 CORS 头部信息，如 Access-Control-Allow-Methods、Access-Control-Allow-Headers 等。

**示例代码**

以下是 Node.js 中使用 Express 框架配置 CORS 的示例：

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

// 允许访问的域名const allowedOrigins = [' ' />
app.use((req, res, next) => {
 const origin = req.header('Origin');
 if (allowedOrigins.includes(origin)) {
 res.setHeader('Access-Control-Allow-Origin', origin);
 res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
 res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
 }
 next();
});

// 其他路由处理函数...