请求的资源上存在“Access-Control-Allow-Origin”标头[重复]答案

【问题标题】：'Access-Control-Allow-Origin' header is present on the requested resource [duplicate]请求的资源上存在“Access-Control-Allow-Origin”标头[重复]
【发布时间】：2020-07-11 07:25:13
【问题描述】：

我正在尝试使用 Cors 在 Angular 和我的 .net API 之间建立连接。我不断收到此错误：

localhost/:1 Access to XMLHttpRequest at 'https://localhost:44378/api/OffRec' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

为了修复这个错误。我在 ConfigureServices 中添加了 addCors，在 Configure 中添加了 userCors，如下所示：

  public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors(options =>
            {
                options.AddPolicy("CorsPolicy",
                builder =>
                {
                    builder.WithOrigins(new string[] { "http://localhost:4200" , "https://localhost:44378/api/offrec" }).AllowAnyMethod().WithHeaders("Access-Control-Allow-Origin");
                });
            });

            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_3_0);
                services.AddControllers();
               services.AddDbContext<db_recloadContext>();
        }

我的配置方法只是使用Cors：

 public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();

            }
            else
            {
                app.UseHsts();
            }
            app.UseRouting();
            app.UseCors("CorsPolicy");
           app.UseHttpsRedirection();

          // app.UseAuthorization();
           app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
        }

我的 api 有一个非常简单的代码，它返回一个字符串，当我运行我的 api 时，它工作正常。

过去 2 天我一直在努力解决这个错误。任何提示或帮助将不胜感激。

这是我根据下面的答案尝试过的仍然得到同样的错误：

 services.AddCors(options =>
            {
                options.AddPolicy("CorsPolicy",
                builder =>
                {
                    builder.WithOrigins(new string[] { "http://localhost:4200" , "https://localhost:44378/api/offrec" }).AllowAnyMethod().WithHeaders("Access-Control-Allow-Origin:*");
                });
            });

下面是错误的图片：

enter image description here

下面是我的api：

namespace RecLoad.Controllers
{
    [Route("api/[controller]")]
    [EnableCors("AllowAnyCorsPolicy")]

   [HttpGet]
       public ActionResult<string> Get()
        {

            return "This is a test";

        }

【问题讨论】：

所以从技术上讲，错误信息和你的问题标题完全相反！？
检查浏览器的 URL 并确保来源与列表中的来源之一匹配。

标签： angular api cors

【解决方案1】：

CORS 是一种工具，可让某些服务的所有者限制从何处访问该服务。您在 localhost:4200 有一个网站，它正在与 localhost:44378 的 Web 服务联系以请求一些数据。我知道它们都是本地主机，但它们是不同的东西；它们也可能是 http://mysite.example 上的脚本，试图从 http://remoteservice.example 获取数据。

因此，您的浏览器在 4200 站点的页面上运行脚本，知道它正在联系与下载脚本的服务器不同的服务器，因此它会告诉其他服务器服务器“嘿，告诉我您将接受来自哪些服务器的请求，该资源位于 /api/offRec”，服务器（位于 44378）响应类似“我将只允许从我这里下载的脚本”之类的内容

此时您的浏览器会停止请求； “外国”服务器并未表示愿意为您的脚本提供该资源

作为 44378 服务器的管理员，您需要做的是在其配置中添加一些 CORS 标头，说明“Access-Control-Allow-Origin：*”或“Access-Control-Allow-Origin：@ 987654323@" 等，这样当浏览器在站点的 4200 端口上运行脚本时，向 44378 资源请求信息时，它得到的响应还包含一个允许访问的标头

重申一下，以防我不完全清楚：必须添加标头的是运行 44378 站点的服务器，而不是 4200 站点

使用网络浏览器向 44378 站点发出请求，并在开发工具检查器中查看标头。如果您没有看到 Access-Control-Allow-Origin 标头，请重新配置它直到您看到

【讨论】：