vue里的跨域- proxyTable

最新推荐文章于 2024-07-25 09:28:23 发布

403-forbidden

最新推荐文章于 2024-07-25 09:28:23 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/weixin_39173093/article/details/80588686

版权

在开发过程中vuecli有自带的服务器，但是我们实际要去请求我们的数据接口时，服务器与服务器之间会产生了一个代理跨域问题，如何解决这个跨域问题呢？

webpack做构建工具的项目中使用proxyTable代理实现跨域是一种比较方便的选择

这样我们就需要修改自带服务的配置了，在config 中的index文件中，有一个proxyTable参数

参数如下：

 
  proxyTable: {}, 
 

改写成下面样式：

proxyTable: {
  '/list': {
    target: 'http://xxxx.xxxx.com',
    pathRewrite: {
      '^/list': '/list'
    }
  }
}

这样我们在写url的时候，只用写成/list/a就可以代表xxx.xxx.com/list/a.

如果需要跨域那么需要加上参数changeOrigin:true

本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了

proxyTable: {
'/list': {
target: 'http://xxx.xxx.com',

changeOrigin:true,
    pathRewrite: {
      '^/list': '/'
    }
}
},

eg:

 
  proxyTable: { 
 
  '/goods/*' 
  :{ 
 
  target: 
  'http://localhost:3000', 
 
  changeOrigin: 
  true, 
 
  pathRewrite: { 
 
  '^/goods' 
  : 
  '/goods' 
 
   } 
 
   }, 
 
  '/users/*' 
  :{ 
 
  target: 
  'http://localhost:3000', 
 
  changeOrigin: 
  true, 
 
  pathRewrite: { 
 
  '^/users' 
  : 
  '/users' 
 
   } 
 
   } 
 
   },