AJAX跨域請求設定,解決問題方案。
阿新 • • 發佈:2020-11-13
設定響應頭
解決跨域呼叫服務並設定headers 主要的解決方法需要通過伺服器端設定響應頭、正確響應options請求,正確設定 JavaScript端需要設定的headers資訊 方能實現,本文是WebAPI程式環境。
第一步 服務端設定響應頭,在webapi的web.config做如下設定
<system.webServer> <httpProtocol> <!--跨域配置開始--> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /><!--支援全域名訪問,不安全,部署後需要固定限制為客戶端網址--> <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /><!--支援的http 動作--> <add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With,token" /><!--響應頭 請按照自己需求新增 這裡新加了token這個headers--> </customHeaders> <!--跨域配置結束--> </httpProtocol>
第二步 攔截OPTIONS請求,過濾該請求。
第一步已經完成了請求響應處理,但是很多情況下,還是不夠的,通常,本地域請求時,只有一次請求,但是跨域請教,都是經過兩部實現的。
瞭解IE chrome 等瀏覽器 對於 跨域請求並要求設定Headers自定義引數的時候的 "預請求" 就是如果遇到 跨域並設定headers的請求,所有請求需要兩步完成!
傳送預請求 OPTIONS 請求。此時 伺服器端需要對於OPTIONS請求作出響應 一般使用202響應即可 不用返回任何內容資訊。(能看到這份手稿的人,本人不相信你後臺處理不了一個options請求)options請求可在許可權攔截器中處理
/// <summary> /// 許可權攔截器 /// </summary> public class ApiAuthorizeAttribute : AuthorizeAttribute { public override void OnAuthorization(HttpActionContext actionContext) { if (actionContext.Request.Method == HttpMethod.Options) { actionContext.Response = actionContext.Request.CreateResponse(HttpStatusCode.Accepted); return; } } }
伺服器accepted 第一步請求後 瀏覽器自動執行第二步 傳送真正的請求。
客戶端程式碼:
$("#btnLogin").click(function () { var model = { userName: "ceshi", password: "123456" }; $.ajax({ type: "POST", url: "http://localhost:8080/api/user/login", data: model, contentType: "application/json; charset=utf-8", dataType: "json", beforeSend: function (xhr) { xhr.setRequestHeader("token", Ticket); // 請求發起前在頭部附加token }, success: function (data, status) { } }); });
解決方法就這麼簡單的,其他問題你可以再根據自己的實際情況解決。