vue+django 开发环境跨域前后端联调配置

2023-12-14 18:33:46

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_SLASHFalse忽略这种差异,但请注意,这样做可能会影响其他部分的 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-headers

step2: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

后端

文章来源:https://blog.csdn.net/bigcarp/article/details/134842460
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。