【发布时间】:2021-07-16 06:51:22
【问题描述】:
所以我使用 Vue 制作了一个 Web 应用程序,并且我正在使用 ASP.NET Web App (.NET 5) 作为后端。
当我在 localhost:44393 上本地运行 Web API 时,它可以很好地从本地运行的客户端发出 POST 和 GET 请求。
然后我点击“发布”将文件发送到我托管的地方。
此时,我将客户端用于发出请求的 URL 更改为 https://api.mywebsite.com,这与我现在发布它以来在本地运行的网站是同一个网站。
(它使用 fetch 发出这些请求,因此它将是 fetch("https://api.mywebsite.com/TheController/AddServer" )
这就是奇怪的地方,因为当我发出注册或登录的帖子请求时,它工作得很好,但只要我转到“添加帖子”,这是一个发布到不同端点的表单API,我收到此错误。
访问“https://api.mywebsite.com/TheController/AddPost”获取 来自“https://mywebsite.com”的来源已被 CORS 阻止 政策:没有“Access-Control-Allow-Origin”标头出现在 请求的资源。如果不透明的响应满足您的需求,请将 请求模式为“no-cors”以获取禁用 CORS 的资源。
当我在本地运行 Web API 时不会发生这种情况。为什么它仅在我将文件发布到主机并使用实际域后才会发生? (当客户端也在本地运行时,我尝试从客户端发出相同的请求,但它给出了完全相同的异常)
我把问题中的域名换成了mywebsite.com,因为我不想分享它。
这是我的配置服务
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy(name: MyAllowSpecificOrigins,
builder =>
{
builder.WithOrigins("https://mywebsite.com",
"http://localhost:8080",
"https://mywebsite.com/add")
.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod();
});
});
...
还有配置
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseSwagger();
app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "mcraftserverapi v1"));
}
app.UseHttpsRedirection();
app.UseRouting();
app.UseCors(MyAllowSpecificOrigins);
app.UseAuthentication();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapDefaultControllerRoute();
endpoints.MapControllers()
.RequireCors(MyAllowSpecificOrigins);
});
}
【问题讨论】:
-
啊!谢谢! :-)
-
我不会将
.WithOrigins(...)与.AllowAnyOrigin()一起使用。这是没有意义的,因为您说“这些起源都可以”然后“所有起源都可以”。 -
我会尝试删除
.WithOrigins(...)。当我第一次使用它时,我认为它会起作用,但事实证明,即使我指定了它,它也不允许原点。 -
尝试使用F12开发者网络工具检查响应头,是否包含“Access-Control-Allow-Origin”属性?如果它不包含该属性,则必须添加它。此外,如果您的应用程序托管在 IIS 上,您可以尝试install IIS CORS module 并为应用程序配置 CORS。参考:Enable Cross-Origin Requests (CORS) in ASP.NET Core.
标签: c# cors asp.net-core-webapi