跨域請求被阻止，即使它以200ok狀態代碼回應

伙計們，我正在開發一個全堆疊 React.js - ASP.NET Core 5 應用程式。后端完成（完全測驗）。當然，它包含一個 CORS 策略以允許來自客戶端的請求，但是當我嘗試使用 axios 發送來自 react 的請求時，axios 會引發網路錯誤：

跨域請求被阻止：同源策略不允許讀取位于 https://localhost:5001/api/customers 的遠程資源。（原因：缺少 CORS 標頭“Access-Control-Allow-Origin”）。狀態代碼：200。

我看到服務器發送了正確的回應（我什至可以除錯服務器）但 axios 仍然失敗。我只是試圖通過在以下內容中包含代理來解決它package.json：

"proxy": "https://localhost:5001"

我將包括我的app.js請求代碼和startup.cs代碼，因為它包含 CORS 策略：

客戶

  const fetchCustomers = async () => {
    const customers = await axios.get(customersApiUrl);
    console.log(customers);
    setCustomers(customers);
    setIsLoading(false);
  };

服務器

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:3000/");
                                  builder.AllowAnyHeader();
                                  builder.AllowAnyMethod();
                              });
        });
        services.AddControllers();
        services.AddDbContextPool<TwinEnginesDbContext>(options =>
        options.UseSqlServer(Configuration.GetConnectionString("Standard")));
        services.AddScoped<ICustomerTypeRepository, CustomerTypeRepository>();
        services.AddScoped<ICustomerTypeService, CustomerTypeService>();
        services.AddScoped<ICustomerRepository, CustomerRepository>();
        services.AddScoped<ICustomerService, CustomerService>();
        services.AddAutoMapper(Assembly.GetExecutingAssembly());
    }

    // 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(MyAllowSpecificOrigins);
        app.UseAuthorization();

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

編輯：我包括CustomersController.cs代碼以及來自 HTTP 請求的詳細資訊。
客戶控制器.cs

    [Route("api/[controller]")]
    [ApiController]
    public class CustomersController : ControllerBase
    {
        private readonly ICustomerService _customerService;
        private readonly ICustomerTypeService _typeService;
        private readonly IMapper _mapper;

        public CustomersController(ICustomerService customerService, ICustomerTypeService typeService, IMapper mapper)
        {
            this._customerService = customerService ?? throw new ArgumentNullException(nameof(customerService));
            this._typeService = typeService ?? throw new ArgumentNullException(nameof(typeService));
            this._mapper = mapper ?? throw new ArgumentNullException(nameof(mapper));
        }

        // [EnableCors("MyAllowSpecificOrigins")]
        [HttpGet("")]
        public async Task<ActionResult<IEnumerable<CustomerDTO>>> GetCustomers()
        {
            var customers = await _customerService.GetAllAsync();
            var response = _mapper.Map<IEnumerable<CustomerDTO>>(customers);
            return Ok(response);
        }
}

請求圖片： 任何想法，想法？我真的需要你們的幫助，這是開發作業的技術任務。

uj5u.com熱心網友回復：

嘗試使用末尾不帶斜杠的設定： builder.WithOrigins("http://localhost:3000");

更改后請清理并重建專案，因為它可能是一件事。

此外，您不需要在 JS 端設定代理。

mode請求的PS A可能在 Axios 端沒有正確設定。如果上述解決方案不起作用，請嘗試使用：

axios(requestURL, { mode: 'cors' })

uj5u.com熱心網友回復：

嘗試將此屬性添加到您的控制器

[EnableCors(MyAllowSpecificOrigins)]

標籤：反应 asp.net核心 asp.net-core-5.0

上一篇：將檢索到的物件推送到React中的狀態只會給我帶來最后一個

下一篇：替換組件狀態下的陣列物件