vue.config 配置proxy代理问题记录

proxy的使用场景
仅用于本地开发环境, 避免请求服务端的跨域问题 生成环境(build后) 解决跨域需要在服务端配置CORS等其他方法

跨域产生的原因
浏览器同源策略限制, 在浏览器内, 请求方与被请求方的url中, 协议 host port 任意一个不一样则产生跨域, 导致无法正确请求

proxy解决跨域的原理
避开浏览器的同源策略限制, 变成请求本地的代理服务器(即proxy), 再由本地的服务器进行请求转发到 实际的服务器

配合proxy 需要设置的请求配置
http请求的baseurl, 通常是设置为实际服务器的地址,
但如果要设置proxy, 则需要设置为'/', 即把本地地址设置为proxy服务器, 这样才能将请求发给本地服务器, 再由本地服务器转发到 实际服务器

ps: 设置了proxy的basepath后 要添加到请求地址中, 比如以如下配置的bathpath'/api'为例, 可以直接把baseurl 改为 'api'

vue.config.js中的参考配置如下

module.exports = defineConfig({
  // 配置跨域请求
  devServer: {
    host: '0.0.0.0', 
    // // 项目运行的端口号配置
    port: 8080,
    // // 自动打开浏览器
    // open: true,
    // https: false,
    proxy: {
    // basePath: opts
    /* 发送请求会自动添加上/api作为base path, 比如请求 为 /user 会变为-> /api/user */ 
      '/api': {
        // 要请求的后端接口 实际的服务器地址
        target: 'http://127.0.0.1:3000/',
        // 用于支持websocket，不写默认为true
        ws: true, 
        // 开启跨域，不写默认为true
        changeOrigin: true,
        // 如果是 https,需要开启这个选项
        // secure: true, 
        // 替换 target 中的 basepath, 此处为 http://127.0.0.1:3000/api/user -> http://127.0.0.1:3000/user
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    // 添加后， WebSocket 就不会报错了
    client: {
      webSocketURL: 'ws://0.0.0.0:8080/ws'
    }
  },

或者如下 basePath 为空 则http 的baseUrl 直接为'', 也不需要再进行pathRewrite 清除实际后端接口中不存在的basePath

proxy: {
      '': {
        // 要请求的后端接口
        target: 'http://127.0.0.1:3000/',
        ws: true, // 用于支持websocket，不写默认为true
        // 开启跨域 //默认参数
        changeOrigin: true

      }

ps: proxy详细配置说明 以 官方文档 为准