vue开发环境配置跨域proxy,vue proxy解决跨域

　　本文主要介绍了如何通过配置vue服务器的proxyTable来解决跨域问题，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。

服务器代理proxyTable配置解决跨域

1、Proxy代理作用

　　代理功能：前端服务器代理的功能是告诉服务器任何未知的请求(没有与静态文件匹配的请求)并代理到另一个地址，从而解决跨域问题。

2、常见情况

　　前端向后端请求资源时，如果后端不使用Cros中间件，就会出现跨域问题。解决问题的方法之一是前端使用代理来代理服务器。

3、应用方式

　　当使用vue-cli2创建vue项目时，在config文件夹下的index.js文件中，可以在dev的相关配置信息中的proxyTable中代理一个或多个服务器。

　　注意：

　　ProxyTable是vue-cli提供的解决vue开发环境中跨域的方法。proxyTable的底层使用的是http-proxy-middleware，也就是http代理中间件，它依赖于node.js，基本原理是使用服务器代理来解决跨域浏览器跨域。

　　有时候开发的时候我们要求的后代的接口和vue不在同一个域名，导致跨域，但是后端服务器不开cors。这时候就需要配置proxyTable来解决跨域问题。

4、具体配置实例

　　代理表：{

　　//api 等于target，在链接中访问/api等于http:/182.xx.xx: 8888/

　　/api:{

　　Target: 3358182.xx.xx: 8888/，//服务器的接口地址

　　secure:true，///如果是https的话，需要开启这个选项。

　　Change origin: true，//是跨域请求吗？图雷

　　路径重写：{

　　/^api:api/

　　//如果真实接口包含/api，需要这样配置。

　　//相当于/API=/API API==http://182 . xx . xx:8888/API

　　}

5、配置思路

　　当网络请求的完整路径为/api/ynai/static/ai/时，会出现跨域问题，这时网络请求就需要前端服务器代理。

　　具体配置如下：

　　首先，代理标记名必须与请求路径中的标题一致。示例代码如下：代理表：{/API: {}}

　　配置目标参数，确定请求代理的服务器根路径。代码示例如下：

　　根据需要确定ws(websocket代理)的布尔值。

　　配置changeOrigin，赋值给ture，允许跨域。

　　根据需要配置pathRewrite参数。

　　如果最终代理之后的路径中不需要/api，则需要配置pathRewrite的参数，以将路径重写为“”

　　代理原理：

　　假设代理配置如下：

　　则：

　　1.当网络请求发生时，代理配置文件将定期匹配网络请求路径，无论它是否匹配代理(例如，如果请求是/aaa/static/ai/并且代理配置有/aaa ，则匹配成功)

　　2.匹配成功后，代理配置生效，他会请求/aaa/static/ai/，按照代理配置指定的方式处理，最后拼接到target指向的服务器根路径(http://www.baidu.com/)。

　　3.最终形成完整的请求路径(http://http://www . Baidu . com/static/ai/ai)，解决了跨域问题。

　　小结：前端服务器代理配置依赖于保证代理配置文件能够匹配axious请求的url，使得target指向的服务器地址能够与url正确拼接，获得完整的跨域请求路径，进而请求远程资源。

Vue.proxyTable是什么？

　　在vue项目的config文件夹下的索引文件中有一个proxyTable节点。

　　ProxyTable是vue-cli scaffold在开发模式下提供的跨域代理服务器服务。它基于http-代理-中间件插件。

为什么会有proxyTable存在？

　　我开发毕业设计的时候：一个基于vue springboot的手机交易网站。因为我用前端分离，前端用节点服务器，后端用tomcat服务器。所以涉及到跨域，是因为端口不一样。

　　正常情况下，不能通过ajax从后台请求数据。由于跨域、浏览器的同源策略，该数据返回被拦截。

　　解决方法：

　　1.服务器启动cors。

　　2.使用代理服务器进行传输(vue请求自己的后台，让后台请求需要数据的后台，然后将数据返回给vue。

　　如果不能从后台设置cors进行跨域支持。那么我们只能通过配置proxyTable来跨域。

配置proxyTable

　　proxyTable跨域的基本原理：

　　在开发模式下，webpack将为我们提供一个http代理服务器。当我们请求接口时，它实际上是由请求的webpack提供的这个http代理服务器。该代理服务器请求真正的数据服务器。最后，数据通过webpack代理服务器。最后转到vue程序。

　　为什么加个代理服务器就可以了？

　　因为代理服务器不是浏览器，所以没有相应的策略限制。

　　代理表：{

　　//在这里配置“/api”相当于target。你访问/API中的链接==http://localhost: 54321

　　/api: {

　　目标： 3358localhost: 54321/，//真的是服务器的接口地址//3358 localhost:54321/JSON . data . JSON，

　　Secure: true，//如果是https，这个选项需要打开。

　　ChangeOrigin: true，//是跨域请求吗？当然，如果没有跨域，就不需要配置这个proxyTable。

　　路径路径：{

　　//这里有一个附加链接。比如接口中包含/api，就需要这样配置。

　　/^api: api/，

　　//相当于

　　//第一步/api=http://localhost:54321/

　　//第二步/^api=/API API==http://localhost:54321/API

　　}

　　总结。

　　1.proxyTable是webpack在开发环境中提供的代理服务器。

　　2.目的是在开发阶段，服务器不方便开通跨域功能时，发送ajax跨域请求。

　　3.让cors在真实发布环境下后台打开就行了。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。