1. 程式人生 > >cors跨域問題

cors跨域問題

sco vs2015 不能 allow 並不會 name config 狀態 添加

這兩天公司布置一個特別簡單的管理系統,增刪查改四個接口,前端使用技術(html/css/angularjs),後臺(c#/mvc),數據庫(mysql)

前端寫完,後臺寫完,在交互的時候就遇到了跨域的問題,在postman上每一個接口都可以正常運行(確定接口是無誤的)

以前實驗室做項目時用的反向代理(我並不會),後來在網上找了很多方法,比如jsonp,添加header,cors

剛開始用的加header,加了之後get接口可以正常運行,但是其他的接口仍然不能使用,。。。。。。

後來就像嘗試以下新的方法,Cors

後臺IDE用的vs2015,在Tools裏的Nuget裏面搜索microsoft.aspnet.webapi.cors。。。。再安裝

然後在WebConfig裏面添加

<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
</customHeaders>
</httpProtocol>

此時不出意外應該可以了(如果之前加了很多header,這個時候F12控制臺可能會出現過多什麽的,將之前家的header去掉就行了)

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

但是真正的問題來了,做POST方法的請求時你會發現請求執行了兩次,懵逼了很久,還是仔細看了以下F12中response的內容,兩次請求中Request-mothod是不同的,第一次是options,第二次才是POST請求(第一次是空的提交,即如果是ADD操作就會先添加一條空的記錄,然後再添加實際要添加的記錄)。話說百度了好多,大家說的都差不多第一次options請求就是預檢請求,客戶端收到對預檢請求的返回值後才進行真正的POST請求(https://zhuanlan.zhihu.com/p/24411090)詳細的介紹。

關於怎麽去掉這個options請求,我個人認為是去不掉的,只能在後端做處理,我在我的接口裏面加了下面的語句

Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, x-requested-with, X-Custom-Header");
if ("OPTIONS".Equals(Request.HttpMethod))
{
Response.StatusCode = 204;(http://blog.sina.com.cn/s/blog_6998d7bd01017zl2.///////////htmlResponse.StatusCode的HTTP狀態代碼列表)
return 1;

}

這個時候斷點查看接口運行過程還是請求了兩邊但是前端界面反應的終於是添加了一次記錄了。

當然解決跨域方法很多。。。。。。。。。。還可以嘗試使用其他的。

cors跨域問題