Vue+Django Rest Framework跨域问题解决方法

vue-element-admin的登录功能分析。
134阅读 · 0评论 · 2020-9-30 21:58发布

问题背景

跨域是指浏览器从一个域名的网页访问另一个域名的资源时,协议、域名、端口不同,都是跨域请求。JavaScript的同源策略规定,只有协议、主机名、端口号均相同时,才允许互相访问。

前后端分离的模式下,前后端分别部署,导致域名、端口不一致。此时就会产生跨域请求的场景。

以下环境的配置:

  • Django 2.2
  • djangorestframework 3.11.1
  • vue 2.6.10
  • vue-element-admin 4.4.0

Django Rest Framework

本文使用第三方库django-cors-headers。配置方法如下:

  1. 安装第三方库django-cors-headers
    pip install django-cors-headers -i https://pypi.douban.com/simple
    
  2. 在项目的settings.py中配置如下内容。

    # settings.py
     INSTALLED_APPS = [
         ...省略...
         'corsheaders',
     ]
    
     MIDDLEWARE = [
         'corsheaders.middleware.CorsMiddleware',  # 需要放在最前面(csrf前面即可)
         ...省略...
     ]
    
     # 支持跨域的配置
     CORS_ORIGIN_ALLOW_ALL = True
    
  3. 此时重启项目,后端接口就支持跨域请求了。

Vue(vue-element-admin)

  • 使用vue-element-admin进行二次开发,在此项目中配置支持跨域。

配置方法如下:

  • 打开vue.config.js文件,增加如下内容:
# vue.config.js
    module.exports = {
      //...省略...
      devServer: {
        port: port,
        open: true,
        overlay: {
          warnings: false,
          errors: true
        },
        //增加如下内容
        proxy:{
          [process.env.VUE_APP_BASE_API]: {
            target: 'http://127.0.0.1:8000',  // 转发的url
            changeOrigin: true,  // 支持跨域
            pathRewrite: {
              ['^' + process.env.VUE_APP_BASE_API]: ''
            }
          }
        },
        before: require('./mock/mock-server.js')
      },
  • 修改.env配置文件,例如修改.env.development。
# 内容修改为空即可
VUE_APP_BASE_API = ''
  • 此时再重启项目,调用不同域名(或端口)的网页,跨域成功。

共有0 条评论

暂无评论