close

[Solved] CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response in javascript. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response Error Occurs?

Today I get the following error CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response in javascript.

How To Solve CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response Error ?

  1. How To Solve CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response Error ?

    To Solve CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response Error For anyone getting this using ServiceStack backend; add “Authorization” to allowed headers in the Cors plugin:
    Plugins.Add(new CorsFeature(allowedHeaders: "Content-Type,Authorization"));

  2. CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response

    To Solve CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response Error For anyone getting this using ServiceStack backend; add “Authorization” to allowed headers in the Cors plugin:
    Plugins.Add(new CorsFeature(allowedHeaders: "Content-Type,Authorization"));

Solution 1

This is an API issue, you won’t get this error if using Postman/Fielder to send HTTP requests to API. In case of browsers, for security purpose, they always send OPTIONS request/preflight to API before sending the actual requests (GET/POST/PUT/DELETE). Therefore, in case, the request method is OPTION, not only you need to add “Authorization” into “Access-Control-Allow-Headers”, but you need to add “OPTIONS” into “Access-Control-allow-methods” as well. This was how I fixed:

if (context.Request.Method == "OPTIONS")
        {
            context.Response.Headers.Add("Access-Control-Allow-Origin", new[] { (string)context.Request.Headers["Origin"] });
            context.Response.Headers.Add("Access-Control-Allow-Headers", new[] { "Origin, X-Requested-With, Content-Type, Accept, Authorization" });
            context.Response.Headers.Add("Access-Control-Allow-Methods", new[] { "GET, POST, PUT, DELETE, OPTIONS" });
            context.Response.Headers.Add("Access-Control-Allow-Credentials", new[] { "true" });

        }

Solution 2

For anyone getting this using ServiceStack backend; add “Authorization” to allowed headers in the Cors plugin:

Plugins.Add(new CorsFeature(allowedHeaders: "Content-Type,Authorization"));

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment