在前端开发过程中，调用不同域名的接口时经常会遇到浏览器提示CORS策略拦截的错误，很多开发者第一反应是想从前端代码层面修改配置来绕过限制，实际上这种做法大多无法生效，因为CORS策略的核心控制权完全在服务器端。
CORS策略的基本工作原理
CORS全称为跨域资源共享，是浏览器为了安全推出的一套跨域请求管控机制。当浏览器发起跨域请求时，会先检查目标服务器返回的响应头中是否包含允许当前源访问的相关字段，如果不符合要求就会直接拦截响应，不会把数据交给前端代码处理。
整个过程的核心判断逻辑都在浏览器和服务端之间完成，前端代码无法干预浏览器的拦截行为，这也是客户端存在局限性的根本原因。
为什么客户端无法直接解决CORS问题
很多开发者会尝试在前端做如下操作，但都无法解决CORS限制：
- 修改前端请求的
mode参数为no-cors，这种方式下请求可以发出，但返回的响应会被浏览器标记为不透明，前端无法读取任何响应内容，没有实际意义。 - 在前端代码中手动修改请求头，浏览器会在发送跨域请求前先发送预检请求，检查服务端是否允许对应的请求头，客户端修改的字段如果没有被服务端允许，预检请求就会失败。
- 尝试通过前端代理转发请求，这种方式本质是让请求变成同源请求，不属于直接解决CORS问题，而是绕开了跨域场景。
浏览器的CORS拦截逻辑是内置的安全机制，前端代码没有权限关闭或者修改这套逻辑，因此所有CORS相关的权限配置都必须在服务器端完成。
常见的服务器端CORS配置方案
1. 基础跨域允许配置
如果服务端使用Node.js的Express框架，可以通过中间件设置响应头允许跨域：
const express = require('express');
const app = express();
// 允许所有源访问，生产环境建议指定具体域名
app.use((req, res, next) => {
// 允许的请求源，*代表所有，也可设置为具体域名如 https://www.ipipp.com
res.setHeader('Access-Control-Allow-Origin', '*');
// 允许的请求方法
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
// 允许的请求头
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
// 是否允许携带凭证（如Cookie）
res.setHeader('Access-Control-Allow-Credentials', 'false');
// 处理预检请求的缓存时间，单位秒
res.setHeader('Access-Control-Max-Age', '86400');
// 如果是预检请求直接返回成功
if (req.method === 'OPTIONS') {
return res.sendStatus(200);
}
next();
});
app.get('/api/data', (req, res) => {
res.json({ code: 0, data: '跨域请求成功' });
});
app.listen(3000, () => {
console.log('服务运行在3000端口');
});
2. Nginx反向代理配置
如果服务端使用Nginx部署，可以直接在Nginx配置文件中添加跨域响应头：
server {
listen 80;
server_name api.ipipp.com;
location / {
# 代理到实际的服务端口
proxy_pass http://127.0.0.1:3000;
# 允许跨域的源
add_header Access-Control-Allow-Origin *;
# 允许的方法
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
# 允许的请求头
add_header Access-Control-Allow-Headers 'Content-Type, Authorization';
# 处理预检请求
if ($request_method = 'OPTIONS') {
return 204;
}
}
}
3. Java Spring Boot配置
Spring Boot项目可以通过全局配置类开启CORS支持：
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 对所有接口生效
.allowedOrigins("*") // 允许的源
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的方法
.allowedHeaders("*") // 允许的请求头
.allowCredentials(false) // 是否允许凭证
.maxAge(3600); // 预检请求缓存时间
}
}
不同场景下的配置注意事项
如果是需要携带Cookie的跨域请求，Access-Control-Allow-Origin不能设置为*，必须指定具体的请求源，同时Access-Control-Allow-Credentials要设置为true。
如果请求中包含自定义请求头，需要在Access-Control-Allow-Headers中明确列出这些头字段，否则预检请求会失败。
对于简单的GET、POST请求，浏览器不会发送预检请求，只需要配置Access-Control-Allow-Origin即可，但如果是PUT、DELETE等请求或者携带自定义头的请求，必须正确处理OPTIONS预检请求。
需要注意，CORS策略只是浏览器的限制，如果是服务端之间的调用、或者使用Postman等工具发起的请求，不会受到CORS策略的影响，因为这些场景没有浏览器的安全管控逻辑。