JavaScript POST 请求返回异常：跨域请求的解决之道

前端

2023-12-24 01:45:13

跨域资源共享 (CORS)：实现跨域请求的指南

在当今相互关联的网络世界中，网站经常需要从其他域获取资源，这可能会导致跨域请求。跨域资源共享 (CORS) 是一种机制，它使用附加的 HTTP 头来告知浏览器可以从不同域访问资源。

理解 CORS

CORS 的工作原理是浏览器在进行跨域请求之前发送一个预检请求，以检查服务器是否允许该请求。如果服务器允许，浏览器会发送实际的请求。预检请求包含以下信息：

请求方法： 预检请求使用 OPTIONS 方法来确定服务器是否允许特定的请求方法（例如 GET、POST）。
请求头： 预检请求包含请求中将使用的任何自定义请求头。
请求来源： 预检请求指定请求的来源域。

服务器响应预检请求包含以下信息：

Access-Control-Allow-Origin： 该头指定哪些域可以访问资源。
Access-Control-Allow-Methods： 该头指定允许的请求方法。
Access-Control-Allow-Headers： 该头指定允许的自定义请求头。
Access-Control-Max-Age： 该头指定预检响应缓存的时间长度。

使用 XMLHttpRequest 进行跨域请求

在 JavaScript 中，您可以使用 XMLHttpRequest 对象进行跨域请求。以下是使用 XMLHttpRequest 进行跨域请求的示例：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/api/v1/resource', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
xhr.send(JSON.stringify({ name: 'John Doe' }));

服务器端 CORS 配置

要启用 CORS，服务器端需要正确配置。您需要设置适当的 CORS 头，例如 Access-Control-Allow-Origin。在 Node.js 中，您可以使用以下代码：

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

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, Authorization');
  next();
});