如何用ASP.NETCore解決REACT中的CORS錯誤

我有一個ASP.NET Core Web API和一個單獨的React應用程式。該 Web API 使用 Windows 認證。當部署到服務器上時，我沒有任何問題，但當我試圖在本地運行該應用程式時，我得到了 CORS 錯誤，而且只在 POST 操作上。以下是我在Startup.cs中的內容：

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting。
using Microsoft.EntityFrameworkCore。
using Microsoft.Extensions.Configuration。
using Microsoft.Extensions.DependencyInjection。
using Microsoft.Extensions.Hosting。
using Microsoft.OpenApi.Models。
using Server.DAL。
using Server.Data;

命名空間服務器.資料;資料。
{
    公共 class Startup {
    {
        公共 Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        //此方法會被運行時呼叫。使用此方法來向容器添加服務。
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<AppDbContext>(options =>； options
               .UseSqlServer(Configuration.GetConnectionString("DatabaseConnection"/span>)
               .UseLazyLoadingProxies())。

            services.AddScoped<IUnitOfWork, UnitOfWork>（）。

            services.AddControllers（）。

            services.AddCors(options => options.AddPolicy("CorsPolicy"/span>,
                builder => 
                {
                    構建者
                    .WithOrigins("http://localhost:3000"/span>)                        
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .AllowCredentials()。
                }));    
        }

        //此方法被運行時呼叫。使用此方法來配置HTTP請求管道。
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment()
            {
                app.UseDeveloperExceptionPage（）。
            }

            app.UseSwagger()。

            app.UseHttpsRedirection（）。

            app.UseRouting()。

            app.UseCors("CorsPolicy"/span>)。

            app.UseAuthorization（）。

            app.UseEndpoints(endpoints =>)
            {
                endpoints.MapControllers（）。
            });
        }
    }
}

而且，這是我在React應用程式中的axios配置：

import axios, { AxiosInstance } from "axios"/span>;

let axiosInstance: AxiosInstance。

const axiosBaseConfig = {
  baseURL: process.env.REACT_APP_BASE_URL。
  timeout。1000 * 20,
  withCredentials: true,
  headers: {
    Accept: "applicaiton/json"。
    "Content-Type": "application/json"。
  },
};

export const getAxios = （）=> {
  if (axiosInstance) {
    return axiosInstance。
  }

  axiosInstance = axios.create（axiosBaseConfig）。

  return axiosInstance。
};

我在這里有什么遺漏或做錯的地方嗎？

更新：

這是我得到的 CORS 錯誤：

更新：

這是我得到的 CORS 錯誤。

在'https://localhost:44376/api/reservation'訪問來自'http://localhost:3000'的 XMLHttpRequest 已被 CORS 政策所阻止。對preflight請求的回應沒有通過訪問控制檢查。回應中'Access-Control-Allow-Credentials'頭的值是''，當請求的憑證模式是'include'時，必須是'true'。由XMLHttpRequest發起的請求的憑證模式是由withCredentials屬性控制的。

uj5u.com熱心網友回復：

我將做兩個改變，只是為了開發和在本地機器上運行：

 public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<AppDbContext>(options =>； options
               .UseSqlServer(Configuration.GetConnectionString("DatabaseConnection"/span>)
               .UseLazyLoadingProxies())。

            services.AddScoped<IUnitOfWork, UnitOfWork>（）。

            services.AddCors(options => options.AddPolicy("CorsPolicy"/span>,
                builder => 
                {
                    構建者
                    .AllowAnyOrigin()                        
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .AllowCredentials()。
                })); 

            services.AddControllers（）。                      
        

另外，如果你使用的是IIS，你可能想看看這個帖子，因為這可能是一個戰斗前的問題：

Asp.net core web api using windows authentication - Cors request unauthorised

您可能需要將此添加到您的啟動設定中，允許視窗和匿名進行預演：

您可能需要將此添加到您的啟動設定中，允許視窗和匿名進行預演。

{
  "iisSettings"/span>: {
    "windowsAuthentication": true,
    "anonymousAuthentication": true。
    "iisExpress": {
      "applicationUrl": "http://localhost:3000",
      "sslPort": 0.
    }
  },
 {...更多的設定 如果 任何}.
}

uj5u.com熱心網友回復：

嘗試一下：-

在你的ConfigureServices

services.AddCors()。

而你的配置方法 app.UseCors(x => x.AllowAnyHeader().AllowAnyMethod().WithOrigins("http://localhost:3000"));

希望它能解決你的問題。

標籤：

上一篇：如何告訴services.AddAuthorization我的自定義用戶和角色表在哪里？

下一篇：將從API收到的物件存盤在應用程式的資料庫中，還是總是從API獲取？