CORS 策略已阻止访问 XMLHttpRequest - JavaScript

介绍

在 JavaScript 中，当使用 XMLHttpRequest 对象发送跨域请求时，可能会遇到 CORS（跨域资源共享）策略导致请求被阻止的情况。CORS 是一种浏览器安全机制，用于限制不同域名之间的数据交互，并防止跨站点请求伪造攻击。

CORS 原因

浏览器实施同源策略，即默认情况下，JavaScript 只能在与包含它的原始文件同源的服务器上发起请求。如果试图从不同源的服务器发起请求，浏览器会发送一个预检请求（OPTIONS 请求）到目标服务器，以检查是否允许跨域请求。

CORS 策略规定了服务器响应的头部信息，用于指示哪些跨域请求是被允许的。如果服务器未正确设置 CORS 头部信息，浏览器会阻止 JavaScript 对 XMLHttpRequest 对象的使用，从而导致请求被拒绝。

解决方法

为了解决 CORS 问题，有几种常见的方法：

1. 在服务器端设置正确的 CORS 头部信息，允许特定来源的请求。

   • 设置 Access-Control-Allow-Origin 头部指定特定的来源域名，或设置为通配符 * 允许任何来源。
   • 可以使用服务器端语言，如 PHP、Node.js 等，在响应中添加相应的头部信息。

2. 使用代理服务器发送请求。

   • 可以在同源服务器上设置一个代理，将跨域请求转发到目标服务器，并将响应返回给 JavaScript。
   • JavaScript 发送请求到代理服务器，避免了跨域问题。

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

   • JSONP 是一种通过动态创建 <script> 标签实现跨域请求的方式。
   • JSONP 请求只能发送 GET 请求，并且服务器端返回的数据需要包裹在一个函数调用中，以便 JavaScript 可以进行处理。

示例代码

以下是在 Node.js 中使用 Express 框架设置 CORS 头部信息的示例：

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

// 设置 CORS 头部信息
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// 处理跨域请求
app.get('/data', (req, res) => {
  const data = { message: 'Hello, CORS!' };
  res.json(data);
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

在上述示例中，我们使用 Express 框架创建了一个简单的服务器。通过设置 Access-Control-Allow-Origin 头部为 *，允许任何来源的请求访问 /data 路由。

请注意，不同的后端语言和框架有不同的设置 CORS 头部信息的方式，以上为其中一种示例。

总结

当 JavaScript 中的 XMLHttpRequest 对象遇到 CORS 策略阻止请求时，需要在服务器端正确设置 CORS 头部信息或使用其他方法来解决跨域问题。这有助于实现安全的跨域数据交互，并避免跨站点请求伪造攻击。