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 端口。

javascript 复制代码

  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

javascript 复制代码

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：

python 复制代码

pip install django-cors-headers

step2：settings.py中配置三项

python 复制代码

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，还需配置：

javascript 复制代码

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

后端

javascript 复制代码

# 改为True即为可跨域设置Cookie
CORS_ALLOW_CREDENTIALS = True

# 这里有一个需要注意的点
# chrome升级到80版本之后，cookie的SameSite属性默认值由None变为Lax
# 也就是说允许同站点跨域 不同站点需要修改配置为 None（需要将Secure设置为True）
# 需要前端与后端部署在统一服务器下才可进行跨域cookie设置

# 总结：需要设置 samesite = none、secure = True（代表安全环境 需要 localhost 或 HTTPS）才可跨站点设置cookie

后端