时间戳

首页 > 解决方案 > 请求的资源上存在“Access-Control-Allow-Origin”标头

angular - 请求的资源上存在“Access-Control-Allow-Origin”标头

问题描述

我正在尝试使用 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 时，它工作正常。

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

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

 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:*");
                });
            });

下面是错误的图像：

在此处输入图像描述

下面是我的api：

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

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

            return "This is a test";

        }

标签： angularapicors

解决方案

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：https:// localhost:4200 "等，这样当浏览器在站点上的 4200 端口上运行脚本时，它会从 44378 资源中请求信息，它得到的响应还包含一个允许访问的标头

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

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

推荐阅读