ByPass CORS

Steps to avoid CORS in Dev environment.

1. CORS and PreFlight.MDN

2. In Dev environment, we can follow these steps to avoid this.

2.1 we can install a chrome extention with name Allow-Control-Allow-Origin, enable it and specify the url.
2.2 we still need some steps to configure back-end. Add following code into the Global.asax.

protected void Application_BeginRequest()
        {
            if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
            {
                Response.Flush();
            }
        }

Then we can play with it.

3. we can bypass this only from angular/cli. Follow these steps.github

we can follow these steps to create a config file on the same location level with package.json.

{
    "/api":{
        "target":"http://hostname:port", // like http://localhost:3000
        "secure": false,
        "pathRewrite":{"^/api":"http://hostname:port/api"},
        "changeOrigin":true,
        "logLevel":"debug"
    }
}

and then we modify the package.json to
"start": "ng serve --proxy-config proxy.conf.json"
then we can play with it.

Another issue Found for this. If you deploy two website with same ABP teplates on the same IIS, eventhough, they use different port.
we may meet with 400 Empty or invalid anti forgery header token.
Here is the solution

Add these code into your webapi ABP Module

Configuration.Modules.AbpWebCommon().AntiForgery.TokenCookieName = "...";