ajax跨域-CORS

CORS：跨域資源共享，是一種跨域訪問的W3C標準，它容許瀏覽器能夠跨源服務器進行請求，可讓ajax實現跨域訪問。出現跨域問題的緣由是瀏覽器同源策略致使的，協議+域名+端口三者一致被認爲是同源。網站出現同源策略問題，即：出現了未經容許的跨域請求。

 

同源策略下的限制：

• 沒法獲取非同源的Cookie、LocalStorage、SessionStorage等
• 沒法獲取非同源的dom
• 沒法向非同源的服務器發送ajax請求

 

CORS原理: 瀏覽器與服務器經過一些HTTP協議頭來作一些約定和限制，使用了額外的 HTTP 頭來告訴瀏覽器，容許 Web 應用服務器進行跨域訪問。從而使跨域數據傳輸得以安全進行。當一個資源從與該資源自己所在的服務器不一樣的域、協議或端口請求一個資源時，資源會發起一個跨域 HTTP 請求。本質原理是在服務器的response header中加入「Access-Control-Allow-Origin: *」便可實現跨域訪問。但注意並不必定是瀏覽器限制了發起跨站請求，也多是跨站請求能夠正常發起，可是返回結果被瀏覽器攔截了。

 

 解決方式：

 

• JSONP方式
• CORS方式
• 代理請求方式

 

一、經過Ajax獲取json數據時，存在跨域的限制。可是在Web頁面上調用js的script腳本文件時卻不受跨域的影響，因此可使用JSONP來實現跨域的傳輸。所以，咱們須要將Ajax調用中的dataType從JSON改成JSONP（相應的API也須要支持JSONP）格式。注意：JSONP只能用於GET請求。

 

2.一、Django

• 直接修改Django中的views.py文件，修改views.py中對應API的實現函數，添加響應頭以此容許其餘域經過Ajax請求數據：

 def myview(_request):  
    response = HttpResponse(json.dumps({"key": "value", "key2": "value"}))
    response["Access-Control-Allow-Origin"] = "*"  
    response["Access-Control-Allow-Methods"] = "POST, GET, OPTIONS"  
    response["Access-Control-Max-Age"] = "1000"  
    response["Access-Control-Allow-Headers"] = "*"  
    return response 

 

• 安裝 django-cors-headers中間件：官方文檔

 

2.2、Flask：安裝 flask_cors 擴展，官方文檔

 

三、代理請求方式

1. 接受客戶端的`請求` 。
2. 將 `請求` 轉發給服務器。
3. 拿到服務器 `響應的數據`。
4. 將 `響應` 轉發給客戶端。