vue项目配置proxyTable解决数据请求跨域问题
gooood个人博客网站
vue
在我们进行项目开发时，想要和别的服务器进行通信，那肯定会遇到跨域问题，所谓跨域 就是因为同源策略的限制，导致不同源之间不能通信。所谓同源是指，域名，协议，端口相同。同源策略(Same origin policy)是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
解决跨域问题，通常有两种方式：第一：后台配置允许所有域访问或者允许指定域访问。第二：前端proxyTable配置代理。下面 我们来讲讲如何前端配置跨域，而且这只是在开发环境下的配置跨域，生产环境下还要配置Nginx代理服务。在vue项目的config文件下的index.js下中的proxyTable做如下配置（若我们调用的完整接口是：:8080/Zloud/Controls/queryAllControls）
proxyTable: { '/api': { target: 'http://192.168.0.22:8080', changeOrigin: true, pathRewrite: { '^/api': '' } }, // 倘若我们需要访问不同的服务器可像如下添加配置 '/card': { target: 'http://api.pyun.com', changeOrigin: true, pathRewrite: { '^/card': '' } } }, 那我们调用接口就可以这样调用：
export const getLampMgmtInfoList = (params) => { return Axios.post('/api/ZCloud/Controls/queryAllControls', params).then(res => res.data) } 这样配置好后，就不会再出现关于禁止访问的跨域报错了。
代理成功之后你查看自己网络请求中的url：:8010/api/Zloud/Controls/queryAllControls，说明你已经把请求代理到自己的代理服务器上了，说明配置成功了。