預檢響應中的 Access-Control-Allow-Headers 不允許 ASP.Net WEB API 請求標頭字段授權

Question

我編寫了我的 WEBAPI 代碼來向經過身份驗證的用戶獲取一些數據，我遇到了多種問題並且解決了。 但是現在當我嘗試獲取經過身份驗證的用戶的數據列表時遇到問題 chrome 給我這個錯誤

XMLHttpRequest 無法加載http://192.168.10.95/KS.API.Client/api/Data 。 預檢響應中的 Access-Control-Allow-Headers 不允許請求頭字段授權。

a 這就是我從純 html 頁面調用 WebApi methor 的人

$.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);
                    }
                });

請放過我

Answer 1

在您的 WebAPI 中，您需要安裝包 Microsoft.Owin.Cors。 打開 Nuget 包控制台，輸入這個

Install-Package Microsoft.Owin.Cors 

安裝添加引用后，需要到Startup.cs添加這一行app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll); 進入您的配置功能它看起來像這樣

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

將以下內容添加到 Web API 的 web.config 文件中以啟用訪問：

<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>

這應該放在你的 web.config 的 system.webServer 節點中。

請閱讀官方文檔以正確使用和控制從外部使用 CORS 的訪問