[英]CORS Origin issue using ASP.NET Core 3.1
I am encountering a weird CORS issue when using C# ASP.NET Core 3.1 and GraphQL (Version="3.3.2").我在使用 C# ASP.NET Core 3.1 和 Z524DE3D2ADE4544176F6070 时遇到了一个奇怪的 CORS 问题。 In the Startup.cs
file, I have setup the UseCors like this:在Startup.cs
文件中,我设置了 UseCors,如下所示:
public void Configure(IApplicationBuilder app, ILoggerFactory loggerFactory)
{
if (Environment.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseCors (x => x
.AllowAnyOrigin ()
.AllowAnyMethod ()
.AllowAnyHeader ());
...
}
And also create a ConfigureCors
function like this:并且还像这样创建一个ConfigureCors
function:
private void ConfigureCors(IServiceCollection services)
{
var requestOrigins = Configuration.GetSection("RequestOrigins")?
.GetChildren()
.Select(url => url.Value)
.ToArray() ?? new string[] {};
services.AddCors(options =>
{
options.AddPolicy(name: AllowSpecificOrigins,
builder =>
{
builder.WithOrigins(requestOrigins)
.AllowAnyHeader()
.AllowCredentials()
.AllowAnyMethod();
});
});
}
Called the ConfigureCors
like this:像这样调用ConfigureCors
:
public void ConfigureServices(IServiceCollection services)
{
ConfigureCors(services);
...
}
In appsetting.{env}.json
, I set the RequestOrigins
:在appsetting.{env}.json
中,我设置了RequestOrigins
:
"RequestOrigins": [
"http://localhost:8889"
]
When using frontend React to call the mutation like this:当使用前端 React 调用突变时,如下所示:
const link = new HttpLink({
uri: 'https://localhost:5001/graphql/v1',
fetchOptions: {
credentials: 'include'
},
headers : {Authorization: `Bearer ${localStorage.getItem('Token')}`}
})
export default new ApolloClient({
link,
cache
});
It will throw the CORS issue:它将抛出 CORS 问题:
Access to fetch at 'https://localhost:5001/graphql/v1' from origin 'http://localhost:8889' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. CORS 策略阻止了从源“http://localhost:8889”获取“https://localhost:5001/graphql/v1”的访问权限:对预检请求的响应未通过访问控制检查:值当请求的凭据模式为“包含”时,响应中的“Access-Control-Allow-Origin”header 不能是通配符“*”。
However the backend log shows:但是后端日志显示:
info: Microsoft.AspNetCore.Hosting.Diagnostics[1]信息:Microsoft.AspNetCore.Hosting.Diagnostics[1]
Request starting HTTP/1.1 OPTIONS https://localhost:5001/graphql/v1请求启动 HTTP/1.1 OPTIONS https://localhost:5001/graphql/v1info: Microsoft.AspNetCore.Cors.Infrastructure.CorsService[4]信息:Microsoft.AspNetCore.Cors.Infrastructure.CorsService[4]
CORS policy execution successful. CORS 策略执行成功。
I am very confused:我很困扰:
OPTIONS
not the POST
, since I am calling a graphql mutation?为什么OPTIONS
不是POST
,因为我调用的是 graphql 突变?However, if I commented out the Authentication part like this:但是,如果我这样注释掉 Authentication 部分:
const link = new HttpLink({
uri: 'https://localhost:5001/graphql/v1',
//fetchOptions: {
//credentials: 'include'
//},
//headers : {Authorization: `Bearer ${localStorage.getItem('Token')}`}
})
Got the authorization failed error, but not CORS blocker.收到授权失败错误,但不是 CORS 阻止程序。 The token I have validated work in Postman.我已经验证的令牌在 Postman 中工作。 If I remove the app.UseCors
, the CORS blocker comes back which is understandable.如果我删除app.UseCors
, CORS 阻止程序会回来,这是可以理解的。 My guess is some CORS related configuration I didn't do right, but not sure which part, anyone knows what's going on?我的猜测是一些 CORS 相关配置我没有做对,但不确定哪个部分,有人知道发生了什么吗? Thanks a lot!非常感谢!
based on Microsoft Doc's in this link when ever u add new policy u need to specify that policy to app.UseCors().基于此链接中的 Microsoft Doc,当您添加新策略时,您需要将该策略指定给 app.UseCors()。 and also pay attention to this还要注意这一点
The call to UseCors must be placed after UseRouting, but before UseAuthorization.对 UseCors 的调用必须放在 UseRouting 之后,但在 UseAuthorization 之前。 For more information, see Middleware order.有关详细信息,请参阅中间件顺序。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.