ASP.NET Core Web Api 发送 Access-Control-Allow-Origin: null CORS header and chrome 出错，如何解决？

Posted 2023-02-27

【中文标题】ASP.NET Core Web Api 发送 Access-Control-Allow-Origin: null CORS header and chrome 出错，如何解决？

【英文标题】：ASP.NET Core Web Api sending Access-Control-Allow-Origin: null CORS header and chrome is erroring, how to fix?

【发布时间】：2018-08-24 07:39:57

【问题描述】：

昨天我设法让我的 API 在我的本地计算机上工作，但是今天（相同的代码）在另一台计算机上，它不工作，我在控制台上收到此错误：

无法加载http://localhost:52056/api/task： “Access-Control-Allow-Origin”标头的值“null”不是 等于提供的原点。因此不允许使用 Origin 'null' 访问。

这是 Chrome 上的 http 请求和响应：

（我在 IE/Firefox 中看不到错误）

这是我的启动类（使用 .net core 2）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
using TodoApi;

namespace TestCors

    public class Startup
    
        public Startup(IConfiguration configuration)
        
            Configuration = configuration;
        

        public IConfiguration Configuration  get; 

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        
            services.AddSingleton<ITaskWarehouse, TaskWarehouse>();

            services.AddCors();
            services.AddMvc();
        

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        
            if (env.IsDevelopment())
            
                app.UseDeveloperExceptionPage();
            

            app.UseCors(builder => builder
                    .AllowAnyOrigin()
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .AllowCredentials());
            app.UseMvc();
        
    

这里有什么问题？ 代码和昨天一样，但是我在 Windows 10 上运行，这台机器有 Windows 7。 有什么想法吗？ 谢谢

【问题讨论】：

您是否只是在浏览器中打开发出 ajax 请求的 html 页面，而没有任何服务器（所以通过双击它）？

A null Access-Control-Allow-Origin is a known exploit 所以我猜 chrome 已经做了正确的事情，并且在其他浏览器还没有（还）的地方进行了修补。你把它改成什么取决于你真正想要它做什么。我猜你想要* 这是一个有效值

嗨@Evk，是的，我只是双击磁盘文件中的html文件，它有javascript代码来发出http请求，使用javascript框架库（骨干网）。这是一个问题?

如何让它有 * 而不是 null @Liam ？我在 web api 的配置方法上配置了 AllowAnyOrigin，难道这还不足以让 * 响应而不是 null 吗？

我不确定 TBH，我不使用这项技术，maybe WithOrigins("*") 但这是猜测 TBH

【参考方案1】：

尝试删除

.AllowCredentials()

CORS 不允许您将 .AllowCredentials() 和 .AllowAnyOrigin() 用于同一策略。我不明白为什么它可以在不同的机器上工作。

这是来自ASP.NET页面

CORS 规范还指出，将来源设置为“*”是无效的，如果 SupportsCredentials 为 true。

【讨论】：

成功了，非常感谢！另一台机器有不同的操作系统和不同的 chrome 版本，也许它让事情以某种方式工作 xD

CORS 不允许这样做是的，但是 asp.net 核心足够聪明来处理它。如果您同时指定两者 - 它将在响应标头中返回请求来源而不是“*”（就像有问题的屏幕截图一样）。

【参考方案2】：

问题是您正在打开 html 页面，只需双击它即可发出此请求，而无需使用服务器。所以浏览器中的 url 是“file:///...”。这意味着没有来源，正如您在问题的屏幕截图中看到的那样 - CORS 请求具有“Origin：null”标头。不同的浏览器以不同的方式处理这种情况。 Chrome 会限制来自此类来源的跨域请求，即使响应允许（通过将“null”作为“Access-Control-Allow-Origin”返回）。

所以要修复 - 使用适当的服务器（本地服务器），或使用其他浏览器进行开发。也有人声称像这样启动 chrome

chrome.exe --allow-file-access-from-files

也应该“解决”这个问题，虽然我自己没有尝试过。

更新：我的印象是，即使使用 Access-Control-Allow-Origin: * chrome 也不会允许它，但您对其他答案的评论似乎另有主张（通过删除 AllowCredentials() 您做出回应以使用“*”作为允许的来源而不是请求中提供的来源）。如果是这样 - 这是修复它的另一种方法（不确定，也许它在不同的 chrome 版本中表现不同）。

【讨论】：

是的，我的浏览器正在使用“file:///...”，我可以问你一个简单的问题吗？如果我只需要运行这个 html 文件，那么使用合适的服务器（本地服务器）有什么好处？我应该只使用 nodejs 来提供这个单一的 html 吗？

@TiagoM 在这种情况下很好，它确保您的 CORS 请求将在 chrome 中运行 :) 我只是不知何故从未将原始 html 文件分发给客户，但当我想到这一点时 - 为什么不确实如此.另一方面，您将失去 Web 的所有好处，例如轻松更新（我的意思是，如果您运行的不是本地而是常规的远程 http 服务器）。所以，取决于你的情况。

有道理，因为这只是一个简单的面试练习，我并没有经历配置合适服务器的所有麻烦，但也许我应该这样做以获得最佳实践，nodejs 容易吗配置只是为了提供一个 html 页面？我的意思是，我仍然需要配置所有路由等等？

您可以使用这个问题来查看如何为单个文件运行 nodejs：***.com/q/35995273/5311735。很容易。但是为什么不从您用于 api (localhost:56052) 的同一台服务器上提供 html 文件呢？作为奖励，您不会有 CORS 问题。

感谢您的链接，我会检查一下！虽然我也是这样，但由于我从命令行使用 typescript/webpack，我认为将 Visual Studio 加入到混合中会是过度杀戮哈哈。