CORS 错误：LinkedIn 身份验证； .NET Core 5 REST API

Question

技术栈

• 使用 .NET CORE React 模板
• 1 个 IIS 网站
• 应用程序池（v4 集成）
• 80 端口

1. 单击注册按钮，调用注册组件。
2. useEffect() 中的组件，使用 Axios 调用“/login URL”
3. C# Map("/login") 被称为使用 LinkedIn 进行身份验证的挑战
4. 然后返回 CORS 错误

错误 Snapshot 1 of 5 Snapshot 2 of 5; Snapshot 3 of 5; Snapshot 4 of 5; Snapshot 5 of 5

反应代码

      const url = `/login`;

      const headers = {
        'Content-Type': 'text/html'
      }

      axios({
        method: 'get',
        url: url,
        headers: headers
      })
        .then((response) => {...})
        .catch((error: Error | AxiosError) => {...});

C# 代码 - 链接身份验证、Cookie、CORS 中间件

Start.cs - ConfigureServices()

        public void ConfigureServices(IServiceCollection services)
        {
            #region AddAuthentication, AddLinkedIn, AddCookie
            services.AddAuthentication()
                .AddLinkedIn(o =>
                {
                    IConfigurationSection linkedinAuthNSection = 
                        Configuration.GetSection("Authentication:Linkedin");

                    o.ClientId = linkedinAuthNSection["ClientId"];
                    o.ClientSecret = linkedinAuthNSection["ClientSecret"];
                })
                .AddCookie(o =>
                {
                    o.LoginPath = "/login";
                    o.LogoutPath = "/logout";
                });
            #endregion

            #region Global CORS Policy Declaration
            services.AddCors(o =>
            {
                o.AddDefaultPolicy(builder =>
                    builder.AllowAnyMethod()
                        .AllowAnyHeader()
                        .AllowAnyOrigin()
                );
            });
            #endregion 

            services.AddControllersWithViews();

            // In production, the React files will be served from this directory
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "client-app/build";
            });
        }

Start.cs - Configure()

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
            }

            #region Map/login
            app.Map("/login", builder =>
            {
                builder.Run(async context =>
                {
                    var properties = new AuthenticationProperties() { RedirectUri = "/" };

                    await context.ChallengeAsync("LinkedIn", properties);
                });
            });
            #endregion

            #region Map/logout
            app.Map("/logout", builder =>
            {
                builder.Run(async context =>
                {
                    await context.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);

                    context.Response.Redirect("/");
                });
            });
            #endregion

            app.UseStaticFiles();
            app.UseSpaStaticFiles();
            app.UseRouting();

            app.UseCors();

            app.UseAuthentication();
            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller}/{action=Index}/{id?}");
            });

            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = Path.Join(env.ContentRootPath, "client-app");

                if (env.IsDevelopment())
                {
                    spa.Options.StartupTimeout = TimeSpan.FromSeconds(240);
                    spa.UseReactDevelopmentServer(npmScript: "start");
                }
            });
        }

Answer 1

终于搞定了！

在尝试理解、理解内化之后，我做出了 2 个重大改变。感谢 Chrome Dev Tools 的黄色警告符号⚠，让我可以this article 并更改解决方案的 1。

更改 1

• 将上述示例代码的主要 sn-ps 应用到我的 React SPA .NET Core 项目中

• 删除了允许管道路径分支的地图中间件 (app.Map("/login")。

• 支持 .NET 控制器/操作。

• 但更具体地说，只是 Action，因为 "/login" 被添加到 URL 的路径中，这使得很难接受成功的登录。

更改 2

• 仅针对身份验证 UI 交互丢弃 Axios 调用，因为 LinkedIn 不支持它。 LinkedIn OAuth redirect login returning "No 'Access-Control-Allow-Origin' header is present on the requested resource" error

• 赞成使用 HTML href。

Authentication.cs

    //[Route("[controller]/[action]")]
    [Route("[action]")]
    public class AuthenticationController : Controller
    {
        [HttpGet]
        public IActionResult Register(string authType = "LinkedIn")
        {
            return Challenge(new AuthenticationProperties() { RedirectUri = "/" });
        }

        [HttpGet]
        public IActionResult Login(string authType = "LinkedIn")
        {
            return Challenge(new AuthenticationProperties() { RedirectUri = "/" });
        }

        [HttpGet]
        public IActionResult Logout()
        {
            return SignOut();
        }

Start.cs ConfigureServices()

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();

            services.AddAuthentication(o =>
            {
                o.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;
                o.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
                o.DefaultChallengeScheme = "LinkedIn";
            })
               .AddCookie()
               .AddOAuth("LinkedIn", o =>
               {
                   o.CorrelationCookie.HttpOnly = true;
                   o.CorrelationCookie.SameSite = SameSiteMode.Lax;
                   
                   var linkedInSection = Configuration.GetSection("Authentication:LinkedIn");

                   o.ClientId = linkedInSection.GetSection("ClientId").Get<string>();
                   o.ClientSecret = linkedInSection.GetSection("ClientSecret").Get<string>();
                   o.CallbackPath = new PathString(linkedInSection.GetSection("CallbackPath").Get<string>());

                   o.AuthorizationEndpoint = linkedInSection.GetSection("AuthorizationEndpoint").Get<string>();
                   o.TokenEndpoint = linkedInSection.GetSection("TokenEndpoint").Get<string>();
                   o.UserInformationEndpoint = linkedInSection.GetSection("UserInformationEndpoint").Get<string>();

                   o.Scope.Add("r_liteprofile");
                   o.Scope.Add("r_liteprofile");

                   o.Events = new OAuthEvents
                   {
                       OnCreatingTicket = async context =>
                       {
                           var request = new HttpRequestMessage(HttpMethod.Get, context.Options.UserInformationEndpoint);
                           request.Headers.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
                           request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", context.AccessToken);

                           var response = await context.Backchannel.SendAsync(request, HttpCompletionOption.ResponseHeadersRead, context.HttpContext.RequestAborted);
                           response.EnsureSuccessStatusCode();

                           var json = JsonDocument.Parse(await response.Content.ReadAsStringAsync());

                           context.RunClaimActions(json.RootElement);
                       }
                   };
               });
        }

Start.cs Configure()

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
            }

            app.UseStaticFiles();

            app.UseRouting();

            app.UseAuthentication();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
                endpoints.MapRazorPages();
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller}/{action=Index}/{id?}");
            });
        }

Answer 2

在您的 Chrome 浏览器中，尝试从 Chrome 网上商店安装一个名为 Access control Allow Origin 的扩展程序。并打开该扩展程序的选项或设置页面，并在文本框中输入您的本地主机地址，如下所示：https://localhost:80 在你的情况下

我曾经遇到过这个问题，这个扩展对我有用..