vue+django跨域問題解決方案（前後端兩種方案）
1.Vue前端設定代理（方案一）
我們在使用vue-cli啟動專案的時候npm run dev便可以啟動我們的專案了，通常我們的請求地址是以localhost:8080來請求介面資料的，localhost是沒有辦法設定cookie的。
我們可以在vue-cli配置檔案裡面設定一個代理，跨域的方法有很多，通常需要後臺來進行配置。我們可以直接通過node.js代理伺服器來實現跨域請求。
vue proxyTable介面跨域請求除錯
在vue-cli專案中的config資料夾下的index.js配置檔案中,dev長這樣子：
dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, cssSourceMap: false }
伺服器提供的介面如果長這樣https://www.exaple.com/server_new/login，我們把域名提取出來如https://www.exaple.com；
在config中新建一個檔案命名為proxyConfig.js:
module.exports = { proxy: { '/apis': { //將www.exaple.com印射為/apis target: 'https://www.exaple.com', // 介面域名 changeOrigin: true, //是否跨域 pathRewrite: { '^/apis': '' //需要rewrite的, } } } }
如果本身的介面地址就有 '/api' 這種通用字首，也就是說https://www.exaple.com/api，就可以把 pathRewrite 刪掉。
config資料夾下的index.js引入proxyConfig.js：
var proxyConfig = require('./proxyConfig')
config資料夾下的index.js中的dev改成:
dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: proxyConfig.proxy, cssSourceMap: false }
重啟npm run dev會發現出現了：
這個時候已經設定好本地API代理了。
修改本地hosts檔案
window檔案路徑一般是C:\Window\System32\drivers\etc，mac則直接前往資料夾/etc/hosts，開啟hosts檔案，在這一段下面把localhost設定進去
# localhost name resolution is handled within DNS itself.
# 127.0.0.1 localhost
# ::1 localhost
127.0.0.1 activate.adobe.com
127.0.0.1 practivate.adobe.com
127.0.0.1 lmlicenses.wip4.adobe.com
127.0.0.1 lm.licenses.adobe.com
127.0.0.1 na1r.services.adobe.com
127.0.0.1 hlrcv.stage.adobe.com
localhost www.exaple.com
此時我們已經完全解決了跨域問題，以及本地測試後臺無法向我們本地環境設定cookie的情況了。
一種一勞永逸的方法
寫一個config.js檔案，作為專案地址的配置。
//專案域名地址
const url = 'https://exaple.com';
let ROOT;
//由於封裝的axios請求中，會將ROOT打包進去，為了方便之後不再更改，判斷了當前環境，而生成的不同的ROOT
if (process.env.NODE_ENV === 'development') {
//開發環境下的代理地址，解決本地跨域跨域，配置在config目錄下的index.js dev.proxyTable中
ROOT = "/apis"
} else {
//生產環境下的地址
ROOT = url;
}
exports.PROXYROOT = url; //代理指向地址
exports.ROOT = ROOT;這裡暴露出去了兩個介面，一個作為代理指向地址，也就是真正的請求地址，一個則為我們的ajax請求的地址。
我們將ROOT引入我們配置的ajax中，再將proxyConfig.js修改如下：
const config = require("../src/fetch/config"); //路徑你們改下
module.exports = {
proxy: {
[config.ROOT]: { //將www.exaple.com印射為/apis
target: config.PROXYROOT,, // 介面域名
secure: false, // 如果是https介面，需要配置這個引數
changeOrigin: true, //是否跨域
pathRewrite: {
[`^${config.ROOT}`]: '' //需要rewrite的
}
}
}
}之後不管是生產環境，還是開發環境，都不用再修改我們的請求地址了。
也就是說，之前我們的方法，在npm run dev的時候，ajax請求介面地址需要帶上/apis，而如果我們在npm run build的時候，則需要將ajax介面地址改為真正的地址www.exaple.com，這樣極其不方便，每次都要改。那我們便通過process.env.NODE_ENV來判斷環境，從而匯出不一樣的介面。
2.django後端允許跨域（方案二）
相比前端的設定而言，後端的解決方案就簡單多了，我們只需要下載一個python包，進行一些設定，就可以完成跨域訪問。
安裝django-cors-headers
這個包是用來解決django跨域的，很多語言中，如C#,Java都有對應的跨域包可以安裝，而且名字帶有cors
通過pip進行安裝：
pip3 install django-cors-headersDjango專案settings設定
在安裝完成後需要進行一些settings的設定：
INSTALLED_APPS = [
...
'corsheaders'，
...
]
# 新增中介軟體
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',# 預設
'django.contrib.sessions.middleware.SessionMiddleware', # 預設
'corsheaders.middleware.CorsMiddleware',# 預設
# 注意順序，即在上一個的下面
'django.middleware.common.CommonMiddleware', # 新增 ✔
'django.middleware.csrf.CsrfViewMiddleware',# 預設
'django.contrib.auth.middleware.AuthenticationMiddleware',# 預設
'django.contrib.messages.middleware.MessageMiddleware', # 預設
'django.middleware.clickjacking.XFrameOptionsMiddleware',# 預設
'django.middleware.common.CommonMiddleware',# 預設
]
# 跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
'*'
)
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
)在這些設定完成後，同樣可以解決跨域的問題。