Vue脚手架配置代理(解决跨域)

最新推荐文章于 2024-04-15 15:42:16 发布

想咯是咯

最新推荐文章于 2024-04-15 15:42:16 发布

阅读量289

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45536315/article/details/127005495

版权

方法一

在vue.config.js中添加如下配置: (单个代理,优先匹配前端资源)

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

方法二

在vue.config.js中添加如下配置:(支持多个代理,前端请求资源时加前缀如下’/api’ ,‘/foo’)

module.exports = {
  devServer: {
    proxy: {
    	//http://localhost:8080/api/xxx
      '/api': { //匹配所有以'/api'开头的请求路径
        target: 'http://localhost:5000',//代理目标的基础路径
        ws: true,
        changeOrigin: true, //为true时,服务器收到的请求头中的host为 http://localhost:5000反之为8080
        pathRewrite: {'^/api':''} //将路径中的'/api'重写为''(删掉)  http://localhost:8080/xxx
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}