1 跨域的理解

image

跨域是指：瀏覽器A從服務(wù)器B獲取的靜態(tài)資源，包括Html、Css、Js，然后在Js中通過Ajax訪問C服務(wù)器的靜態(tài)資源或請求。即：瀏覽器A從B服務(wù)器拿的資源，資源中想訪問服務(wù)器C的資源。

同源策略是指：瀏覽器A從服務(wù)器B獲取的靜態(tài)資源，包括Html、Css、Js，為了用戶安全，瀏覽器加了限制，其中的Js通過Ajax只能訪問B服務(wù)器的靜態(tài)資源或請求。即：瀏覽器A從哪拿的資源，那資源中就只能訪問哪。

同源是指：同一個請求協(xié)議(如：Http或Https)、同一個Ip、同一個端口，3個全部相同，即為同源。

2 跨域的處理

跨域的這種需求還是有的，因此，W3C組織制定了一個Cross-Origin Resource Sharing規(guī)范，簡寫為Cors，現(xiàn)在這個規(guī)范已經(jīng)被大多數(shù)瀏覽器支持，從而，處理跨域的需求。

Cors需要在后端應(yīng)用進行配置，因此，是一種跨域的后端處理方式，這么做也容易理解，一個你不認識的源來訪問你的應(yīng)用，自然需要應(yīng)用進行授權(quán)。除了后端處理方式，也有前端的解決方案，如：JSONP，因這里我們主要講解Flask對Cors的配置，暫不對前端解決方案進行詳細說明。

3 跨域的分類

跨域分為以下3種

1.無自定義請求頭，
2.請求動詞為GET、HEAD或POST之一，
3.動詞為POST時，Content-Type是application/x-www-form-urlencoded，
multipart/form-data或text/plain之一 |
| 預(yù)檢請求 | Preflighted Request | 發(fā)起的Http請求符合其中之一：
1.包含了自定義請求頭，
2.請求動詞不是GET、HEAD或POST，
3.動詞是POST時， Content-Type不是application/x-www-form-urlencoded，
multipart/form-data或text/plain。 即：簡單請求的相反 |
| 憑證請求 | Requests with Credential | 發(fā)起的Http請求中帶有憑證 |

4 Flask配置Cors

Flask配Cors跨域，使用Flask-CORS包，詳細文檔，參見: https://flask-cors.readthedocs.io/en/latest/，總的來說，flask-cors包也提供了兩種方式

3.1 安裝flask-cors

<pre>pip install flask-cors</pre>

flask-cors的官方文檔。

3.2 使用@cross_origin裝飾器

<pre>@app.route("/")
@cross_origin()
def helloWorld():
return "Hello, cross-origin-world!"</pre>

3.3 使用CORS函數(shù)

3.3.1 應(yīng)用全局配置

<pre>app = Flask(name)
cors = CORS(app, resources={r"/api/": {"origins": ""}})

@app.route("/api/v1/users")
def list_users():
return "user example"</pre>

3.3.2 單獨Blueprints配置

<pre>api_v1 = Blueprint('API_v1', name)
CORS(api_v1)

@api_v1.route("/api/v1/users/")
def list_users():
return "user example"</pre>

3.3.3 CORS參數(shù)說明

from:

https://flask-cors.readthedocs.io/en/latest/index.html

https://blog.csdn.net/qq_37193537/article/details/90787198