优化大师安卓版,广州seo工程师,手机微网站与微官网,WordPress个性页面vue环境是127.0.0.1:8080#xff0c;django环境是127.0.0.1:8000 要解决url相对路径和Axios跨域权限问题。 注意#xff1a;程序发起了一个 POST 请求#xff0c;但请求的 URL 没有以斜杠结尾。Django 默认设置是无法执行重定向到带斜杠 URL的。例如#xff1a;url http:/…vue环境是127.0.0.1:8080django环境是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 axiosVue.prototype.$axios Axios
Axios.defaults.baseURL /apiVue.config.productionTip false 关键代码是Axios.defaults.baseURL /api这样每次发送请求都会带一个/api的前缀。 后端配置 安装插件 django-cors-headers ) 本不想额外装这个插件但百度查到的多种解决方案实践下来只有安装插件的方案配置成功。如果不安装插件需要逐个处理 Preflight 请求等问题 def xxx(request): if request.method OPTIONS:
step1
pip install django-cors-headers
step2settings.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后端
