vue+django 开发环境跨域前后端联调配置
vue环境是127.0.0.1:8080，django环境是127.0.0.1:8000 要解决url相对路径和Axios跨域权限问题。
注意：程序发起了一个 POST 请求，但请求的 URL 没有以斜杠结尾。Django 默认设置是无法执行重定向到带斜杠 URL的。例如：url = 'http://127.0.0.1:8000/login/' 成功，但url = 'http://127.0.0.1:8000/login'请求会失败。
虽然可以通过设置 APPEND_SLASH 为 False忽略这种差异，但请注意，这样做可能会影响其他部分的 URL 处理，因此请谨慎使用。
另：如果要解决跨域cookies的问题，还要配置(参考：解决跨域设置cookie问题)
【以下这些配置都是为了联调，上生产环境时应该去掉】
前端配置 （vue.config.js 和 main.js)
在前端项目中，您需要修改 vue.config.js 文件，将 proxy 属性设置为 { target: "http://localhost:8000", changeOrigin: true }。这样，当前端向后端发送请求时，将会被代理到 http://localhost:8000 端口。
devServer: {
host: '127.0.0.1',
port: 8080,
proxy: {
'/api': { //对路径是'/api'开头的请求进行代理
target: 'http://127.0.0.1:8000', // 后台接口域名
ws: false, //如果要代理 websockets，配置这个参数
// secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite:{ //如果联调的后端url也是/api开头，pathRewrite这段可以删掉。（一般是因为main.js中增加了axios.defaults.baseURL = '/api' 这行才需要pathRewrite）
'^/api': '/'
}
}
}}main.js配置BaseUrl
import Vue from 'vue'
import App from './App'
import Axios from 'axios'
Vue.prototype.$axios = Axios
Axios.defaults.baseURL = '/api'
Vue.config.productionTip = false 关键代码是：Axios.defaults.baseURL = '/api'，这样每次发送请求都会带一个/api的前缀。
后端配置 （安装插件 django-cors-headers )
本不想额外装这个插件，但百度查到的多种解决方案，实践下来只有安装插件的方案配置成功。（如果不安装插件，需要逐个处理 Preflight 请求等问题 def xxx(request): if request.method == 'OPTIONS':）
step1：
pip install django-cors-headersstep2：settings.py中配置三项
INSTALLED_APPS = [
...
...
'corsheaders' ，
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware' ，
...
'django.middleware.common.CommonMiddleware' ，# 这行原配置已经有，在这里仅是提示Corsmidlware要放在这句之前
...
]
# 注意：应将Corsmidlware放置在尽可能高的位置，尤其是要放在能够生成响应的中间件之前，比如Django的CommonMiddleware或Whitenoise middleware。如果不是放在这些响应中间件之前，它可能无法将CORS头添加到这些响应中。
#另外，如果您使用CORS_REPLACE_HTTPS_REFERER，它应该放在Django的CsrfViewMiddleware之前。
CORS_ALLOW_ALL_ORIGINS = True # 注意，这里将CORS_ALLOW_ALL_ORIGINS设置为True是为了允许所有的跨域请求，这在开发阶段可能很方便，但在生产环境中应该谨慎使用。---------------
前端运行在localhost:8080上，后端运行在 localhost:8000 上，虽然端口不同，但在同一个主机（localhost）上，对于cookies，浏览器通常会将它们视为相同的源（Same Origin），不需要显式设置 cookieDomainRewrite。
但若涉不同主机cookie，还需配置：
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8000',
ws: true,
changeOrigin: true,
cookieDomainRewrite: 'localhost',
}
}
} 官方文档见 https://github.com/chimurai/http-proxy-middleware
翻译 https://blog.csdn.net/xmloveth/article/details/56847456
如果生产环境也涉及跨域，则需要 axios.defaults.withCredentials = true
后端
# 改为True即为可跨域设置Cookie
CORS_ALLOW_CREDENTIALS = True
# 这里有一个需要注意的点
# chrome升级到80版本之后，cookie的SameSite属性默认值由None变为Lax
# 也就是说允许同站点跨域 不同站点需要修改配置为 None（需要将Secure设置为True）
# 需要前端与后端部署在统一服务器下才可进行跨域cookie设置
# 总结：需要设置 samesite = none、secure = True（代表安全环境 需要 localhost 或 HTTPS）才可跨站点设置cookie
后端