预检响应中的 Access-Control-Allow-Headers 不允许 ASP.Net WEB API 请求标头字段授权

Question

I wrote my WEBAPI code to get some data to authinticated users, I faced multible issues and it is solved. but now I face issue when I tried to get list of data for authinticated user chrome give me this error

XMLHttpRequest cannot load http://192.168.10.95/KS.API.Client/api/Data . Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

aAnd this is who I called WebApi methor from pure html page

$.ajax({
                    url: domain + '/api/Data',
                    type: 'GET',
                    beforeSend: function (xhr) {
                        debugger;
                        xhr.setRequestHeader("Authorization", " Bearer " + sessionStorage.getItem("Token"));
                    },
                    success: function (response) {
                        $.each(response, function () {
                            $('#myTable').append(
                                '<tr><td>'
                                + this.username
                                + '</td><td>'
                                + this.password +
                                '</td></tr>'
                            );
                        });
                        // response
                    },
                    error: function (err) {
                        alert(err.responseText);
                    }
                });

Please lep me

Answer 1

In your WebAPI, you need to install package Microsoft.Owin.Cors. Open Nuget Package Console, type this

Install-Package Microsoft.Owin.Cors 

After install adding reference, you need to go to Startup.cs add this line app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll); into your Configuration function It will looks something like this

public void Configuration(IAppBuilder app)
        {
            HttpConfiguration config = new HttpConfiguration();

            ConfigureOAuth(app);

            WebApiConfig.Register(config);
            app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
            app.UseWebApi(config);
        }

Answer 2

Add the following to your web.config file of your Web API in order to enable access:

<httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS"/>
      </customHeaders>
</httpProtocol>

This should be placed inside system.webServer node of your web.config.

Please read official documentation in order to properly use and control access from outside using CORS