如何解决 GET 请求中的 CORS 预检请求错误

跨域资源共享 (CORS) 是一种浏览器机制，可限制不同域之间的 HTTP 请求。当浏览器检测到请求来自不同域时，它会发出预检请求来检查服务器是否允许该请求。如果预检请求未通过检查，浏览器将阻止实际请求。

错误： 访问来自源 'http://localhost:5173' 的 'http://XXX.XX.XXX.XX:8067/v1/api/subscriber/list/1/20' 的请求已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP 正确状态。

问题分析：

此错误表明服务器已配置为阻止来自特定来源的请求，例如浏览器所在域。预检请求未通过服务器施加的访问控制检查。

1. 确定问题来源

调试请求并检查服务器响应标头以确定问题是前端还是后端。如果服务器响应包含 Access-Control-Allow-Origin: * 标头，则问题可能出在前端。

2. 配置 CORS 标头

在后端代码中配置 CORS 标头以允许来自特定来源的请求。使用 Access-Control-Allow-Origin 标头指定允许的域。

3. 启用预检请求

某些浏览器需要启用预检请求。在后端代码中使用 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 标头指定允许的 HTTP 方法和标头。

4. 检查其他标头

检查其他标头，例如 Access-Control-Max-Age ，它指定预检请求的缓存时间。

// 后端代码
const cors = require('cors');
const app = express();
app.use(cors({
  origin: 'http://localhost:5173',
// 前端代码
const headers = new Headers();
headers.append('Authorization', `Bearer ${token}`);
headers.append('Content-Type', 'application/json');
headers.append('Access-Control-Allow-Origin', 'http://localhost:5173');
fetch(url, {
  method: 'GET',
  headers: headers,
  .then(response => {
    console.log("response------->", response.headers);
  .catch(error => {
    console.error("Error occurred during allSubscribers request:", error);
遵循这些步骤可以解决 GET 请求中的 CORS 预检请求错误。配置正确的 CORS 标头并启用预检请求至关重要。调试服务器响应标头和检查浏览器的日志有助于识别和解决问题。
常见问题解答
为什么会出现此错误？
服务器阻止了来自特定来源的请求，并且预检请求未通过访问控制检查。
如何确定问题出在哪里？
检查服务器响应标头和浏览器的日志以识别问题是前端还是后端。
如何解决此问题？
配置 CORS 标头并启用预检请求，允许来自特定来源的请求。
什么是预检请求？
预检请求是一种浏览器机制，用于在实际请求之前检查服务器是否允许请求。
哪些浏览器需要启用预检请求？
大多数现代浏览器都需要启用预检请求，例如 Chrome、Firefox 和 Safari。