1.由於瀏覽器有同源策略,(相同協議,相同ip,相同端口)才能訪問,由此導致出現跨域問題
2.跨域的解決方法常見的有Jsonp, 以及nginx代理
3.問題:1.禁止跨域到底是瀏覽器禁止的,還是服務器拒絕的 2.如果Nginx代理網站后,為什么訪問Nginx代理的端口的就不會出現跨域呢(Nginx端口肯定也是獨立的啊)
4.問題:為什么跨域請求有時候會有兩次請求,其中一次是optin,請求然后才是正確的請求
解答:
關於上邊的問題解答如下:
2.1.跨域jsonp解決方案是利用script 標簽支持跨域加載,但是script 都是通過get請求,因此josnp 發送的都是get請求,因此無法post數據
2.2 nginx 代理能解決跨域是因為:向代理服務器的nginx發起請求時候,nginx的配置中響應頭中允許了跨域請求(即增加響應頭:'Access-Control-Allow-Origin', '*'),然后nginx 收到請求后會通過代理的請求方式向目標服務器發器請求,然后將數據返回給客戶端,從而解決了跨域問題
3.1 :跨域是瀏覽器通過攔截禁止的,跨域請求發生后,服務器端可以收到跨域的請求並能返回正確的數據,但是如果服務器端未設置允許跨域,則瀏覽器收到數據時候發現不允許跨域請求,那么瀏覽器就會攔截數據,並在控制台中說明是因為同源策略請求失敗的
3.2答案在2.2中
4.在跨域請求中:瀏覽器默認會分為簡單請求和復雜請求,簡單 請求會直接請求服務並返回數據,復雜請求則瀏覽器先發送 optin請求,然后服務器端響應如果允許則會發器后續請求,如果服務器不響應或者拒絕,則不會發器后續請求
其中簡單請求要求如下:
請求方法是以下三種方法之一:
- HEAD
- GET
- POST
HTTP的頭信息不超出以下幾種字段:
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type:只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain
復雜請求發起流程如下:
例如:post請求需要自定義請求頭 ,增加請求頭signature ,和user
那么此時瀏覽器會發起optin 請求,會攜帶如下請求頭
access-control-request-headers: signature ,user
access-control-request-method: POST、
其中access-control-request-headers 是告訴服務器,客戶端想自定義請求頭
access-control-request-method: 是告訴服務器請求通過什么樣方式發出
然后服務器響應:服務器需要響應的響應頭中需要有如下信息
"Access-Control-Allow-Methods", '*' ; //跨域預檢請求時候允許的請求方式,*則是任意請求方式,也可以指定請求頭中的access-control-request-method的值
"Access-Control-Allow-Headers", "*" ;//允許跨域自定義的請求頭,*則是任意請求頭都可以,也可以指定請求頭中的 access-control-request-headers的值
"Access-Control-Allow-Credentials", true //,如果服務器端的響應中未攜帶 Access-Control-Allow-Credentials: true
,瀏覽器將不會把響應內容返回給請求的發送者。
"Access-Control-Max-Age", "3600" //跨域時候預檢周期,防止重復性預檢,即該請求在3600秒以內,不會進行預檢了(周期內不進行optin 請求)
本文參考了該片文章,該文章對跨域解釋很明確感謝:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS