Python - 跨域CORS

我們現在為前端和后端分別設置兩個不同的域名：

位置	域名
前端	www.luffycity.cn
后端	`api.luffycity.cn

編輯/etc/hosts文件，可以設置本地域名

C:\Windows\System32\drivers\etc\hosts

在文件中增加兩條信息，如果報存的過程中，出現權限問題無法保存，則把hosts文件復制到桌面，修改完以后再替換原文件

127.0.0.1   localhost
127.0.0.1   api.luffycity.cn
127.0.0.1   www.luffycity.cn

訪問www.luffy.cirty.cn網址，效果：

上面並不是錯誤，而是沒人監聽了這個地址和端口了，解決方法：

暫停運行前端項目，並修改配置文件config/index.js

    host: 'www.luffycity.cn', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: true,

保存修改信息，並重啟項目

通過瀏覽器訪問drf項目,會出現以下錯誤信息

可以通過settings/dev.py的ALLOWED_HOSTS,設置允許訪問

# 設置哪些客戶端可以通過地址訪問到后端
ALLOWED_HOSTS = [
    'api.luffycity.cn',
]

讓用戶訪問的時候，使用api.luffycity.cn:8000

1. 修改pycharm的manage.py的配置參數

現在，前端與后端分處不同的域名，我們需要為后端添加跨域訪問的支持

否則前端無法使用axios無法請求后端提供的api數據，我們使用CORS來解決后端對跨域訪問的支持。

使用django-cors-headers擴展

在 Response(headers={"Access-Control-Allow-Origin":'客戶端地址/*'})

文檔：https://github.com/ottoyiu/django-cors-headers/

安裝

pip install django-cors-headers

添加應用

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

中間層設置【必須寫在第一個位置】

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

添加白名單

# CORS組的配置信息
CORS_ORIGIN_WHITELIST = (
    'www.luffycity.cn:8080',
)
CORS_ALLOW_CREDENTIALS = False  # 允許ajax跨域請求時攜帶cookie

完成了上面的步驟，我們就可以通過后端提供數據給前端使用ajax訪問了。

前端使用 axios就可以訪問到后端提供給的數據接口，但是如果要附帶cookie信息，前端還要設置一下。

前端引入axios插件並配置允許axios發送cookie信息[axios本身也不允許ajax發送cookie到后端]

npm i axios -S

在main.js中引用 axios插件

import axios from 'axios'; // 從node_modules目錄中導入包
// 允許ajax發送請求時附帶cookie
axios.defaults.withCredentials = false;

Vue.prototype.$axios = axios; // 把對象掛載vue中