vue apache 反向代理 ajax跨域

发布时间:2019-05-14 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue apache 反向代理 ajax跨域脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

团队合作,单独做前台,测试代码时候,有时候要与后台同学配合,他把后台配置好更新到服务器,我如果也上传到服务器测试明显太累,在本地直接请求会出现跨域问题,有想到jsonp明显不靠谱,只是为了测试污染后台代码.后面考虑本地启用反向代理.
原理和解决方案网上很多,这里记录下后面可以回顾
这次开发选Vue-cli(第一次用感觉是很方便,但是出问题也是头大)

vue-cli里已经考虑到这个问题了,在index.js里面在dev编译环境下有proxyTable属性可以配置
`proxyTable: {
  '/run': {   //这里是我配置的名字
    target: 'http://localhost/work4/0323/TP', //这个路径是我代理到本地tp框架里面  
    changeOrigin: true, //开启代理
    pathRewrite: {
      '^/run': ''//这里重写路径/run就代理到对应地址
    }
  }
},` 

当然如果用nodejs这种热刷新高科技,在本地静态开发,我这边还是小白的wamp环境,apache配置如下,要用肯要先启用,启用Apache proxy module在httpd.conf文件,直接从目录进去因为一会还要配置附加文件

vue apache 反向代理 ajax跨域

改这种文件要记得备份!

找到这两个 把#号去掉

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

保存,然后进extra目录(这是额外配置,为了让httpd.conf不那么大,有的版本可能没这个文件)
找到httpd-vhosts.conf 在开头地方加下面代码

<VirtualHost *:80>
    ProxyRequests off

    <Proxy *>
      Order deny,allow
      Allow from Off
    </Proxy>

    ProxyPass /tp http://hazyzh.com/tp
</VirtualHost>

ProxyPasss 要自己写 不能复制 前面是重新路径,后面是代理到对应的地址
ProxyRequests Off 指令是指采用反向代理
ProxyPass 映射url 我这里吧我主站下tp文件夹映射到这里,你要根据自己需求写ProxyPass
后面我在本地请求/tp开头的路径会自动映射到对应服务器

vue apache 反向代理 ajax跨域


比如这里我写/tp/index.php/...会代理到hazyzh.com/tp/index.php/...
这里正好本地测试时候都是些的/ 根目录,所以后面上线如果后台的文件地址对应,对应就不需要改任何代码,正好一一对应

脚本宝典总结

以上是脚本宝典为你收集整理的vue apache 反向代理 ajax跨域全部内容,希望文章能够帮你解决vue apache 反向代理 ajax跨域所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:Vue