1 什么是 CORS？

Cross-Origin Resource Sharing（CORS）跨域資源共享是一份瀏覽器技術(shù)的規(guī)范，提供了 Web 服務(wù)從不同域傳來(lái)沙盒腳本的方法，以避開(kāi)瀏覽器的同源策略，是 JSONP 模式的現(xiàn)代版。與 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以讓網(wǎng)頁(yè)設(shè)計(jì)師用一般的 XMLHttpRequest，這種方式的錯(cuò)誤處理比 JSONP 要來(lái)的好。另一方面，JSONP 可以在不支持 CORS 的老舊瀏覽器上運(yùn)作?，F(xiàn)代的瀏覽器都支持 CORS。

2 什么是跨域

如果在A網(wǎng)站中，我們希望使用Ajax來(lái)獲得B網(wǎng)站中的特定內(nèi)容

如果A網(wǎng)站與B網(wǎng)站不在同一個(gè)域中，那么就出現(xiàn)了跨域訪問(wèn)問(wèn)題.

由于瀏覽器同源策略，凡是發(fā)送請(qǐng)求url的協(xié)議、域名、端口三者之間任意一與當(dāng)前頁(yè)面地址不同即為跨域。具體可以查看下表（來(lái)源）

[站外圖片上傳中……(1)]

3 問(wèn)題

在 django 和vue.js 的一個(gè)項(xiàng)目中，做RESTFUL接口遇到跨域問(wèn)題，在同一個(gè)主域名下，子域名不同， 用get方式可以成功訪問(wèn)，用post方式訪問(wèn)報(bào)跨域錯(cuò)誤，無(wú)法訪問(wèn)

網(wǎng)上查到的 jsonp解決方法問(wèn)題在于只支持 GET方法，無(wú)法支持POST。

4 解決方法

通過(guò)在服務(wù)器端引入cors解決跨域問(wèn)題，形成和vue.js聯(lián)合使用

cors原文地址

引入 django-cors-middleware

pip install django-cors-middleware

在 settings.py中添加，注意：不添加的話無(wú)法生效

INSTALLED_APPS = (

…

\’corsheaders\’,

)

添加 中間件 監(jiān)聽(tīng)

MIDDLEWARE = [

…

\’corsheaders.middleware.CorsMiddleware\’,

\’django.middleware.common.CommonMiddleware\’,

…

]

配置允許跨域訪問(wèn)的域名

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (

\’google.com\’,

\’hostname.example.com\’

)

默認(rèn)值是全部:

CORS_ORIGIN_WHITELIST = ()

或者定義允許的匹配路徑正則表達(dá)式.

CORS_ORIGIN_REGEX_WHITELIST = (\’^(https?://)?(w .)?>google.com$\’, )

默認(rèn)值:

CORS_ORIGIN_REGEX_WHITELIST = ()

設(shè)置允許訪問(wèn)的方法:

CORS_ALLOW_METHODS = (

\’GET\’,

\’POST\’,

\’PUT\’,

\’PATCH\’,

\’DELETE\’,

\’OPTIONS\’

)

設(shè)置允許的header：

默認(rèn)值:

CORS_ALLOW_HEADERS = (

\’x-requested-with\’,

\’content-type\’,

\’accept\’,

\’origin\’,

\’authorization\’,

\’x-csrftoken\’

)