学习springboot+vue,前端跨域设置代理的方法及注意事项

前端设置跨域代理

新建.env.development文件

在vue前端项目的根目录新建 .env.development文件，设置以下变量

## base API 测试环境
# 使用 VUE_APP_ 开头的变量会被 webpack 自动加载
# 定义请求的基础URL, 方便跨域请求时使用
VUE_APP_BASE_API = '/dev-api'
# 接口服务地址
#VUE_APP_SERVICE_URL ='http://localhost:6888' 

配置vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    host:'0.0.0.0',
    port:'6888',
    open:true,
     proxy:{
      [process.env.VUE_APP_BASE_API]: {
        target: "http://127.0.0.1:6888",
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
     }
    
  }
})

尤其要注意里面的大小写，可能会有莫名的错误。

配置request.js

const request=axios.create({
    // baseURL:'/api',
    // baseURL:'http://localhost',
    baseURL:process.env.VUE_APP_BASE_API,
    timeout:5000
})

这里的 baseURL设置非常关键，如果设置错误，或者不设置就无法指向代理的路径。

调试

打开浏览器的调试窗口，找到网络选项卡，检查发送地址，如果带上了设置的代理服务器的名称，我这里设置的’dev-api’，就说明前端设置代理成功。如果没有，请检查设置。
浏览器调试如图：