解决 .NET Core 和 nginx 双重配置 CORS 问题
解决 .NET Core 和 nginx 双重配置 CORS 问题
在开发基于 .NET Core 的 Web 应用时，经常会遇到跨域资源共享（CORS）的问题。跨域请求是指浏览器从一个不同的域、协议或端口访问资源。在现代 Web 开发中，跨域请求非常常见，但为了安全，浏览器会阻止这些请求，除非服务器明确允许。
最近在配置 .NET Core 应用与 nginx 服务器时，遇到了一个棘手的 CORS 问题。虽然我们已经在 .NET Core 和 nginx 中配置了 CORS，但浏览器仍然提示跨域请求被阻止。本文将详细介绍问题的原因及其解决方案。
问题描述
我们在 .NET Core 应用和 nginx 服务器中都配置了 CORS，但浏览器仍然报错：Access-Control-Allow-Origin 头部包含多个值，且只允许一个值。
具体的报错信息如下：
Access to XMLHttpRequest at 'http://IP1:8090/api/login/loginPwd' from origin 'http://localhost:5173' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:5173,*', but only one is allowed.
通过检查响应头信息，我们发现响应头中确实存在多次设置 Access-Control-Allow-Origin 的情况：
Access-Control-Allow-Origin: http://IP2:5173
Access-Control-Allow-Origin: *
问题分析
nginx 和 .NET Core 同时配置了 CORS，导致返回的响应头中包含多个 Access-Control-Allow-Origin 头部。这种情况违反了 CORS 规范，浏览器会认为这是一个安全风险，从而阻止请求。
解决方案
为了解决这个问题，我们需要确保 CORS 配置只在一个地方进行。可以选择在 nginx 或 .NET Core 中配置 CORS，但不能同时在两者中配置。
方案 1：在 nginx 中处理 CORS 配置
如果选择在 nginx 中处理 CORS 配置，需要确保 .NET Core 应用不再设置 CORS 头信息。
nginx 配置示例：
server {
listen 8090;
location / {
proxy_pass http://test;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $http_host;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
# 设置 CORS 头信息
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Allow-Headers *;
add_header Access-Control-Allow-Credentials true;
}
}
方案 2：在 .NET Core 中处理 CORS 配置
如果选择在 .NET Core 中处理 CORS 配置，需要确保 nginx 不再设置 CORS 头信息。
nginx 配置示例：
server {
listen 8090;
location / {
proxy_pass http://test;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $http_host;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
# 不设置 CORS 头信息
# 删除以下行或注释掉
# add_header Access-Control-Allow-Origin "*";
# add_header Access-Control-Allow-Methods "*";
# add_header Access-Control-Allow-Headers "*";
# add_header Access-Control-Allow-Credentials true;
}
}
.NET Core 配置示例：
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy("AllowSpecificOrigin",
builder =>
{
builder.WithOrigins("*")
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials();
});
});
services.AddControllers();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseCors("AllowSpecificOrigin");
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}
总结
在处理跨域请求时，确保 CORS 配置只在一个地方设置，以避免配置冲突。通过选择在 nginx 或 .NET Core 中配置 CORS，可以解决跨域请求被阻止的问题。在实际开发中，选择合适的配置方案，以满足项目的具体需求和架构设计。希望本文能帮助大家解决类似的 CORS 问题，让跨域请求更加顺畅。
