1. 首页
  2. SEO技术

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,说明你已经把请求代理到自己的代理服务器上了,说明配置成功了。

本文来自SEO排名优化_SEO技术_SEO资讯网,经授权后发布,转载请联系原作者。原文链接:http://www.ylzug.com/js/130.html