JavaScript 中遇到 CORS 跨域报错怎么在后端配置解决-js教程-PHP中文网

后端配置是解决cors报错最标准可靠的方式，需正确设置access-control-allow-origin、methods、headers、credentials等响应头，并妥善处理options预检请求。

javascript 中遇到 cors 跨域报错怎么在后端配置解决

后端配置是解决 CORS 报错最标准、最可靠的方式。浏览器只认服务端返回的响应头，前端无法绕过，必须由后端明确授权。

核心响应头必须正确设置

以下 HTTP 响应头需由后端在每次 API 响应中返回，缺一不可：

Access-Control-Allow-Origin：指定允许访问的源，如 https://your-frontend.com；开发时可用 *，但此时不能带凭证（cookie 或 Authorization）
Access-Control-Allow-Methods：列出允许的请求方法，例如 GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers：声明允许携带的请求头，如 Content-Type, Authorization, X-Requested-With
Access-Control-Allow-Credentials：若前端请求含 credentials: 'include'（比如要传 cookie），此项必须为 true，且 Allow-Origin 不能为 *，必须写具体域名
Access-Control-Expose-Headers（可选）：若前端需读取自定义响应头（如 X-Total-Count），需在此显式列出

预检请求（OPTIONS）必须被正确响应

当请求含自定义 header（如 Authorization）、非简单 Content-Type（如 application/json），或使用 PUT/DELETE 方法时，浏览器会先发一个 OPTIONS 预检请求。后端必须：

对所有 OPTIONS 请求返回 200 OK 状态码
在响应中包含上述全部 CORS 头（尤其是 Allow-Methods 和 Allow-Headers）
不执行业务逻辑，仅做策略响应

主流框架快速配置示例

Express（Node.js）：推荐使用 cors 中间件

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

const cors = require('cors');
app.use(cors({
  origin: 'https://your-frontend.com',
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

Spring Boot（Java）：两种方式任选其一

在 Controller 方法上加注解：@CrossOrigin(origins = "https://your-frontend.com", allowCredentials = "true")
全局配置（推荐）：实现 WebMvcConfigurer，重写 addCorsMappings，精确控制路径与规则

PHP（原生）：在脚本开头添加响应头

header('Access-Control-Allow-Origin: https://your-frontend.com');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
header('Access-Control-Allow-Credentials: true');
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    exit(0); // 预检直接结束
}

Nginx（反向代理场景）：在 location 块中添加

add_header 'Access-Control-Allow-Origin' 'https://your-frontend.com' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;