《vue》设置代理服务器devServer 的 proxy

《vue》设置代理服务器devServer 的 proxy,第1张

在开发环境,vue-cli 会帮我们创建一个开发服务器( http://localhost:8080 ),因此,我们请求后端服务器的时候,可能会出现跨域问题,因为跨域的三要素:域名、端口、协议其一不同。

完整的请求地址

我的这个地址,里面本身就携带有 api 字段的

利用 vue-cli 中的 devServer 配置

记住,如果你的地址没有类似我那个地址那样,有个 api 作为标识的,你可以手动在地址上加上一些标识,然后利用 pathRewrite 再抹掉即可。

一般不会这么做,这样做意义也不大。因为这么做的话,不单单ajax请求都用的远程,连js、css、图片等其他资源都是远程返回的。。。

用了这个方法,在开发阶段,就不用设置 axios 中的 baseUrl 了,或者这样设置:

然后开发阶段,你的一些ajax的请求的 url 就会匹配到 /api 开头,设置 proxy了

千万不要这么设置:

看似匹配到了,实际上没有生效。。。(我也不知道为什么,知道的同学说一下)

实际上,这里是看不到的。。

因为,F12 这里的这个请求,实际上是发给了 本地的临时服务器,再由本地的服务器发送给远程服务器。

可以这么理解:本地服务器将F12的这个请求拦截了,然后自己偷偷改掉 url,再请求的远程服务器。

正因为本地服务器脱离浏览器的束缚,解决了跨域问题!

代理程序 来源于 web-proxy-master 基于node做的代理服务器

nodejs在windows上运行 ,运行命令如下,启动起来的地址是 http://localhost:6001/ ( localhost = 192.168.0.105)

在200上的linux中的/davido/project/nginx-1.17.10_prefix中conf/host/localhost_6066.conf配置以下参数

重启nginx后,在程序中配置天地图访问代理路径为 "proxy": " http://192.168.0.200:6066/proxy/ ",

可以在web页面上看到天地图已经加载出来了。

现在尝试把代理服务器部署到linux上,以下是操作的步骤

参考链接地址为 nodejs 在linux上后台运行

和 linux下使用forever进行管理

linux 提前已经安装nodejs ,路径是/davido/local/ds/nodejs/

出错了, -bash: forever: command not found ,需设置环境变量

forever 管理

修改nginx中代理配置,修改成 http://192.168.0.200:6001 ,把200服务器上的6001端口放开,代理没起作用;


欢迎分享,转载请注明来源:夏雨云

原文地址:https://www.xiayuyun.com/zonghe/519183.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-06-20
下一篇2023-06-20

发表评论

登录后才能评论

评论列表(0条)

    保存