最近做了一個應(yīng)用管理系統(tǒng)，采用前后端分離方式開發(fā)群井，前端使用了layuiadmin框架鸥诽，后端使用了 .net web api，在開發(fā)過程中疹娶，遇到了ajax跨域問題及header自定義設(shè)置伴栓，這是所有前后端分離開發(fā)都需要解決的問題，在此做一個記錄雨饺。
一钳垮、自定義header
在前端ajax請求時，我們在header中設(shè)置了自定義的頭部信息额港，將token寫入了頭部饺窿，便于后端進行身份認證， 如：xhr.setRequestHeader("Authorization", access_token)移斩。通過了ajax全局方法做了統(tǒng)一處理肚医。
var loading={};
$(document).ajaxStart(function(){
loading = layer.load(2, {shade: [0.4,'#fff'] }); //加載中，等待
}).ajaxSend(function (e, xhr, options) {
if(options.type.toLowerCase()=='post'){ //post使用application/json類型
xhr.setRequestHeader("Content-Type","application/json; charset=utf-8");
}
if(access_token!=''&&access_token!=undefined){
xhr.setRequestHeader("Authorization", "Bearer "+access_token); //頭部寫入token
}
}).ajaxComplete(function (event, request, settings) {
layer.close(loading);//關(guān)閉等待
var status=request.status;
switch(status){
case 200:
break;
case 401:
//Unauthorized
console.log('未授權(quán)向瓷，請先登錄授權(quán)!');
common.layExit();//執(zhí)行退出
break;
case 408:
console.log('登錄或請求超時!');
common.layExit();//執(zhí)行退出
break;
case 405:
break;
case 500:
layer.alert('服務(wù)器內(nèi)部錯誤肠套，無法完成請求!');
break;
case 403:
break;
default:
layer.alert('服務(wù)器未能正常返回請求，返回狀態(tài)碼為：'+status);
break;
}
}).ajaxError(function(event,xhr,options){
console.log('ajax請求出現(xiàn)錯誤');
});
在設(shè)置了自定義header后猖任，瀏覽器到后端請求將分為兩步進行你稚。
1.發(fā)送預(yù)請求 OPTIONS 請求
瀏覽器將先發(fā)送一個預(yù)請求OPTIONS到后端，這里后端需要對OPTIONS請求做出正確響應(yīng)朱躺，可以直接返回200狀態(tài)碼刁赖，不用返回內(nèi)容信息。
2.發(fā)送真正的數(shù)據(jù)請求
瀏覽器接收到OPTIONS正確響應(yīng)后會自動執(zhí)行發(fā)送get或post請求长搀∮畛冢可此時依舊沒有請求到后端數(shù)據(jù)，F(xiàn)12查看控制臺輸出源请，會發(fā)現(xiàn)報錯了涯肩。這就是接下來要處理的跨域問題。
二巢钓、解決跨域請求及IE瀏覽器兼容跨域
跨域的處理主要是服務(wù)器端設(shè)置響應(yīng)頭病苗，針對.net web api 可直接在web.config文件中的<system.webServer>節(jié)點中進行設(shè)置，如圖：
Access-Control-Allow-Origin; //支持全域名訪問症汹，不安全硫朦，部署后需要固定限制為客戶端網(wǎng)址
Access-Control-Allow-Methods; //支持的http 動作
Access-Control-Allow-Headers; //響應(yīng)頭 請按照自己需求添加
設(shè)置完成后，前端在chrome下調(diào)用api接口能正常相應(yīng)背镇，但在IE下依舊報錯咬展，如圖：
最終發(fā)現(xiàn)泽裳，我們自定義設(shè)置了Authorization，在IE下破婆，后端并沒有給出相應(yīng)的響應(yīng)涮总，原以為Access-Control-Allow-Headers設(shè)置為*，就能表示所有的響應(yīng)頭祷舀，但在IE下不行瀑梗，需要將自己對應(yīng)的需求以此設(shè)置。如圖
設(shè)置完后裳扯，就可成功訪問后端api抛丽。
