如何启用 CORS 并使其在 Asp.net 核心 Web ZDB97423871438ACF19393F20C1EC91B750799EC5EEBZ 中正常工作

Question

I am trying to create web api using Asp.net Core Web Api and as a front-end i am using React.js. I have done everything what the official Microsoft Doc says to enable CORS and tried every solution on here but it is not working to POST request. What am i doing wrong here?

I am adding on ConfigureService in Startup.cs :

services.AddCors();

and on Configure

 app.UseCors(builder => builder.WithOrigins("https://localhost:PORT_NUMBER")
 .AllowAnyHeader()
 .AllowAnyMethod()
 .SetIsOriginAllowed((host) => true)
 .AllowCredentials()
);

What is wrong with this code? and on frond-end part I am using fetch() to POST items to the backend, it is working fine to fetch items from backend using GET but not with POST:

fetch(url, {
        method: 'POST',
        body: JSON.stringify({
            Ins_Emp: "Ins_Emp",
            Up_Emp: "Up_Emp",
            Item_Code: "Item_Code",
            Item_Name: "Item_Name",
            Item_Spec: "Item_Spec",
            Remark: "Remark",
            Unit_Code: "Unit_Code",
            Up_DateTime: null,
            Ins_DateTime: null,
            Use_YN: null
        }),
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json;charset=utf-16',
        },

I am getting this error from developer tool panel: console

Both backend and frontend is being developed on the same laptop on localhost with different port number.

Answer 1

Personally, I will not enable CORS, because you eventually have to disable it in production and that may have unexpected side effects.

Instead, use a proxy during development so that certain URLs (eg /api/* ) are proxied to the server side.

I assume you are using Create React App, please update me if this is not the case.

Solution for CRA: https://create-react-app.dev/docs/proxying-api-requests-in-development