尝试从反应应用程序的本地主机 web api 端点获取数据 - NoCors 错误

Question

我在 csharp web api 创建了一个端点，它返回一些 json 数据，它在 Z03D476861AFDFA8814Z1 上工作正常。 但是当我在我的反应应用程序上尝试相同的 url 时，我收到以下错误

反应代码

fetch('https://localhost:44391/agency')
  .then(response => response.json())
  .then(json => console.log(json))

错误

Access to fetch at 'https://localhost:44391/agency' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我关注了这个链接Trying to use fetch and pass in mode: no-cors并尝试了以下代码

fetchData () {
           var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
    targetUrl = 'https://localhost:44391/agency'
fetch(proxyUrl + targetUrl)
        .then(blob => blob.json())
        .then(data => {
            console.log(data);
            return data;
        })
        .catch(e => {
            console.log(e);
            return e;
        });
      }

我收到这个错误

GET https://cors-anywhere.herokuapp.com/https://localhost:44391/agency 404 (Not Found)

SyntaxError: Unexpected token N in JSON at position 0

注意我无法执行的链接中的步骤是

git 克隆https://github.com/Rob--W/cors-anywhere.git - 完成

cd cors-anywhere/ - 完成

npm 安装 - 完成

heroku 创建 - 不能这样做。 我需要 HEROKU，我不知道为什么

git 推 heroku 主 - 尚未完成

非常感谢您的帮助

谢谢P

更新

I have enabled CORS on my c# web api following the link https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1#dp

我遵循的部分是CORS with default policy and middleware

我的代码如下

我已经尝试过options.AddPolicy和options.AddDefaultPolicy但是当我从反应应用程序调用时它仍然不起作用

namespace React_NalONE_API
{
    public class Startup
    {
        readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
        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.AddCors(options =>
            {
                // options.AddPolicy(name: MyAllowSpecificOrigins,
                //                 builder =>
                //               {
                //                 builder.WithOrigins("http://localhost/*",
                //                                   "https://localhost/*");
                //         });

                options.AddDefaultPolicy(
                builder =>
                {
                    builder.WithOrigins("http://localhost/*",
                                        "https://localhost/*");
                });
            });
            services.AddControllers();
        }

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

            app.UseHttpsRedirection();

            app.UseRouting();

            app.UseCors();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers().RequireCors(MyAllowSpecificOrigins);
            });
        }
    }
}

Answer 1

如果您只是想在本地进行测试，则不需要 Heroku。 我假设您使用的教程中的那一点只是为了部署应用程序，以展示它的功能。 您不一定需要遵循这一点来让一切正常工作。

问题似乎与 CORS 权限有关，通常浏览器不允许您发出 CORS 请求，除非来自您请求的源的响应包含正确的 CORS 标头。 我会检查一下以获取更多上下文。

If enabling CORS is something you're looking to do, then you probably want to enable CORS in .NET (I'm assuming that you're using .NET - whatever framework you're using, there should be a way to enable CORS)