vue解决跨域：使用proxy进行反向代理

最新推荐文章于 2024-11-05 15:01:08 发布

原创最新推荐文章于 2024-11-05 15:01:08 发布 · 371 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

博客介绍了Vue解决跨域的方法，即使用proxy进行反向代理。还提到配置axios，以及使用cli创建Vue项目后，在根目录创建vue.config.js文件并写入代码，配置结束需重启项目。

vue解决跨域：使用proxy进行反向代理

配置axios

在这里插入图片描述

使用cli创建vue项目，在根目录下创建文件名为vue.config.js的文件，然后写上下面的代码

module.exports = {
//只要路径中出现‘/proxy’就会访问目标路径  traget对应的路径
  devServer: {
    proxy: {
      '/proxy': {
        target: 'http://localhost:7788',
        ws: true,
        changeOrigin: true,
        pathRewrite:{ //路径重写  必须重写，因为你的路径中不需要出现这个‘/proxy’
             '^/proxy':''
         }
      },
      
      '/foo':{
          target:'http://localhost:3001'
      }
    }
  }
}