寫這篇文章時,我們碰到的一個場景是:要給R系統做一個擴展小應用,前端的html、js放在R系統里,后端需要做一個單獨的站點N.B.com。這就導致了跨域問題,而且要命的是,后端同學沒有權限向招聘的系統里加接口做后端跨域,因此只能做個接口允許前端跨域訪問。

有兩種方案:1. 使用ajax直接跨域訪問,2.使用JsonP。實際使用時,由於JsonP向Server提交URL的長度限制在8000字符,超過了則被瀏覽器拒絕,因此不采用。
對於第一種方案,后端需要做的工作是:
接口允許允許跨域請求:
header('Access-Control-Allow-Origin:*'); //支持全域名訪問,不安全,部署后需要限制為R.com
header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); //支持的http動作
header('Access-Control-Allow-Headers:x-requested-with,content-type'); //響應頭 請按照自己需求添加。
前端發起跨域請求:
就是正常的$.ajax請求即可。
但是,碰到個問題,就是option請求問題。。
簡要翻譯內容如下:
在正式跨域的請求前,瀏覽器會根據需要,發起一個“PreFlight”(也就是Option請求),用來讓服務端返回允許的方法(如get、post),被跨域訪問的Origin(來源,或者域),還有是否需要Credentials(認證信息)
三種場景:
1. 如果跨域的請求是Simple Request(簡單請求 ),則不會觸發“PreFlight”。Mozilla對於簡單請求的要求是:
以下三項必須都成立:
1. 只能是Get、Head、Post方法
2. 除了瀏覽器自己在Http頭上加的信息(如Connection、User-Agent),開發者只能加這幾個:Accept、Accept-Language、Content-Type、。。。。
3. Content-Type只能取這幾個值:
application/x-www-form-urlencoded
multipart/form-data
text/plain

2. 其他會導致“PreFlight”的請求。條件基本上是簡單請求的補集。。比如我們的這個請求:

3. 如果是PreFlight request 並且是Redirect的:

瀏覽器直接給拒了 _(:з」∠)_ 。沒太弄明白場景。。如果真想跨域跳轉,發一個Simple Request就OK。。