Vue3跨域代理

1.在根目录上创建一个vue.config.js的文件夹

2.

// 1. npm run build 打包代码
// 2. 把代码给后端
// 3. 后端把前端代码放入后端工程
// 4. 后端重启后端服务
// * 容易出问题的就是下面的配置
module.exports = {
  //devServer.proxy适用于本地开发使用，
  //生成环境请用第三方代理软件，如nginx。
  devServer: {
      port: 8080, //本机端口号
      host: "localhost", //本机主机名
      https: false, //协议
      open: true, //启动服务器时自动打开浏览器访问
      proxy: {
          '/api': {
              //目标服务器,代理访问到https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd
              target: "https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd",
              changOrigin: true, //开启代理
              pathRewrite: {
                  '^/api': ''
              }
          }
      }
  }
}

3.把axios请求的baseURL（基路径）改成 "/api"

const instance = axios.create({
  baseURL: '/api',
  timeout: 10000
})

成功后发送的请求为如下结果

标签：devServer,www,跨域,代理,site,api,https,Vue3
来源： https://blog.csdn.net/AJINNIU/article/details/121465515