js报错cors policy，后端要怎么配置才跨域成功？

什么是 CORS 政策错误

CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种浏览器安全机制，用于限制网页从不同源（协议、域名或端口不同）的资源请求，当浏览器检测到跨域请求时，会检查服务器返回的响应头是否包含 Access-Control-Allow-Origin 等必要字段，如果缺少这些字段，浏览器会拦截响应，并在控制台抛出“CORS policy”错误。

CORS 错误的常见场景

CORS 错误通常在前端与后端交互时出现，

前端开发环境与生产环境不一致：前端在本地开发（如 localhost:3000）请求部署在不同域名或端口的后端（如 api.example.com:8080）。
API 未正确配置 CORS：后端服务器未显式允许跨域请求，或允许的域名与前端请求域名不匹配。
非简单请求的预检失败：如 POST、PUT 等请求或自定义请求头，需先发送 OPTIONS 预检请求，若后端未处理预检，则会导致错误。

如何解决 CORS 错误

后端配置 CORS

后端需在响应头中添加允许跨域的字段，以 Node.js 的 Express 框架为例：

const express = require('express');
const app = express();  
app.use((req, res, next) => {  
  res.header('Access-Control-Allow-Origin', '*'); // 允许所有域名（生产环境建议指定具体域名）  
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');  
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');  
  next();  
});

使用代理服务器

在开发环境中，可通过代理服务器转发请求，避免跨域，在 Vue CLI 或 Create React App 中配置代理：

// vue.config.js  
module.exports = {  
  devServer: {  
    proxy: {  
      '/api': {  
        target: 'http://api.example.com',  
        changeOrigin: true,  
      },  
    },  
  },  
};

检查请求方式与头信息

确保非简单请求（如自定义头）发送 OPTIONS 预检请求，并让后端正确处理。

生产环境中的注意事项

避免通配符：生产环境中不建议使用 Access-Control-Allow-Origin: *，应指定具体域名。
HTTPS 协议：若前端使用 HTTPS，后端也需支持 HTTPS，否则可能因混合内容被拦截。
缓存预检结果：通过 Access-Control-Max-Age 缓存预检请求结果，减少重复请求。

js报错cors policy，后端要怎么配置才跨域成功？

什么是 CORS 政策错误

CORS 错误的常见场景