CORS即跨域资源共享,是浏览器为了安全推出的同源策略补充机制,当网页发起的请求的目标地址和当前页面的协议、域名、端口任意一个不同时,就属于跨域请求,浏览器会先检查服务端返回的响应头是否允许当前来源的请求,只有配置符合要求才会把响应结果返回给页面。

CORS的核心响应头说明
服务端要支持CORS跨域,需要返回以下几个关键的响应头,不同响应头的作用各不相同:
- Access-Control-Allow-Origin:指定允许访问该资源的请求来源,可设置为具体的域名,也可以设置为*表示允许所有来源,生产环境不建议使用通配符。
- Access-Control-Allow-Methods:指定允许的请求方法,比如GET、POST、PUT、DELETE等,多个方法用逗号分隔。
- Access-Control-Allow-Headers:指定允许的请求头,比如Content-Type、Authorization等自定义头需要在这里声明。
- Access-Control-Allow-Credentials:设置为true时表示允许请求携带Cookie等凭证信息,此时Access-Control-Allow-Origin不能设置为*。
- Access-Control-Max-Age:指定预检请求的缓存时间,单位是秒,缓存时间内不需要重复发送预检请求。
不同服务端的CORS配置示例
Node.js Express框架配置
Express中可以使用cors中间件快速配置,也可以手动设置响应头:
// 使用cors中间件配置
const express = require('express');
const cors = require('cors');
const app = express();
// 允许所有来源的请求
app.use(cors());
// 自定义配置允许的来源和方法
const corsOptions = {
origin: 'http://ipipp.com', // 允许的请求来源
methods: ['GET', 'POST', 'PUT', 'DELETE'], // 允许的请求方法
allowedHeaders: ['Content-Type', 'Authorization'], // 允许的请求头
credentials: true, // 允许携带凭证
maxAge: 86400 // 预检请求缓存24小时
};
app.use(cors(corsOptions));
app.get('/api/data', (req, res) => {
res.json({ msg: '请求成功' });
});
app.listen(3000, () => {
console.log('服务启动在3000端口');
});
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("http://ipipp.com") // 允许的请求来源
.allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法
.allowedHeaders("Content-Type", "Authorization") // 允许的请求头
.allowCredentials(true) // 允许携带凭证
.maxAge(86400); // 预检请求缓存时间
}
}
Nginx反向代理配置
如果服务前面有Nginx做反向代理,也可以在Nginx层配置CORS响应头:
server {
listen 80;
server_name api.ipipp.com;
location / {
# 代理到后端服务
proxy_pass http://127.0.0.1:8080;
# CORS配置
add_header Access-Control-Allow-Origin "http://ipipp.com";
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE";
add_header Access-Control-Allow-Headers "Content-Type, Authorization";
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Max-Age 86400;
# 处理预检请求
if ($request_method = 'OPTIONS') {
return 204;
}
}
}
常见跨域问题排查
如果配置了CORS还是出现跨域报错,可以从以下几个方面排查:
- 检查Access-Control-Allow-Origin是否包含当前请求的Origin,注意不要多写斜杠或者协议。
- 如果请求携带Cookie,确认Access-Control-Allow-Credentials设置为true,且Access-Control-Allow-Origin不是通配符。
- 预检请求失败的话,检查Access-Control-Allow-Methods和Access-Control-Allow-Headers是否包含了请求使用的方法和头。
- 确认响应头是服务端返回的,而不是被前端代理或者浏览器插件拦截修改了。
总结
CORS跨域问题的核心解决点就在服务端的正确配置,只要理解了各个响应头的作用,根据实际的业务场景设置对应的允许规则,大部分跨域问题都能快速解决。开发过程中要注意不要随意使用通配符开放所有来源,避免带来安全风险,生产环境尽量明确指定允许的请求来源和请求方式。
CORS跨域问题服务端配置Access_Control_Allow_Origin修改时间:2026-06-16 23:42:18