资讯专栏INFORMATION COLUMN

vue apache 反向代理 ajax跨域

BlackFlagBin / 3105人阅读

摘要:团队合作多带带做前台测试代码时候有时候要与后台同学配合他把后台配置好更新到服务器我如果也上传到服务器测试明显太累在本地直接请求会出现跨域问题有想到明显不靠谱只是为了测试污染后台代码后面考虑本地启用反向代理原理和解决方案网上很多这里记录下后面可

团队合作,多带带做前台,测试代码时候,有时候要与后台同学配合,他把后台配置好更新到服务器,我如果也上传到服务器测试明显太累,在本地直接请求会出现跨域问题,有想到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文件,直接从目录进去因为一会还要配置附加文件改这种文件要记得备份!

找到这两个 把#号去掉

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

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


    ProxyRequests off

    
      Order deny,allow
      Allow from Off
    

    ProxyPass /tp http://hazyzh.com/tp

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82204.html

相关文章

  • vue apache 反向代理 ajax跨域

    摘要:团队合作单独做前台测试代码时候有时候要与后台同学配合他把后台配置好更新到服务器我如果也上传到服务器测试明显太累在本地直接请求会出现跨域问题有想到明显不靠谱只是为了测试污染后台代码后面考虑本地启用反向代理原理和解决方案网上很多这里记录下后面可 团队合作,单独做前台,测试代码时候,有时候要与后台同学配合,他把后台配置好更新到服务器,我如果也上传到服务器测试明显太累,在本地直接请求会出现跨域...

    用户83 评论0 收藏0
  • vue apache 反向代理 ajax跨域

    摘要:团队合作单独做前台测试代码时候有时候要与后台同学配合他把后台配置好更新到服务器我如果也上传到服务器测试明显太累在本地直接请求会出现跨域问题有想到明显不靠谱只是为了测试污染后台代码后面考虑本地启用反向代理原理和解决方案网上很多这里记录下后面可 团队合作,单独做前台,测试代码时候,有时候要与后台同学配合,他把后台配置好更新到服务器,我如果也上传到服务器测试明显太累,在本地直接请求会出现跨域...

    shinezejian 评论0 收藏0
  • Nginx

    摘要:此外,其也能够提供强大的反向代理功能。是由为俄罗斯访问量第二的站点开发的,第一个公开版本发布于年月日。 keepalived+nginx 实现高可用双机热备 + 负载均衡架构 1 准备4个ubuntu16.04虚拟机(启用网卡二并使用桥接模式):A服务器:192.168.0.103 主B服务器:192.168.0.104 主(备) 前端工程师学习 Nginx ...

    syoya 评论0 收藏0
  • Nginx

    摘要:此外,其也能够提供强大的反向代理功能。是由为俄罗斯访问量第二的站点开发的,第一个公开版本发布于年月日。 keepalived+nginx 实现高可用双机热备 + 负载均衡架构 1 准备4个ubuntu16.04虚拟机(启用网卡二并使用桥接模式):A服务器:192.168.0.103 主B服务器:192.168.0.104 主(备) 前端工程师学习 Nginx ...

    Imfan 评论0 收藏0
  • 前端跨域资源请求: JSONP/CORS/反向代理

    摘要:此时完成的跨域代理配置仅仅是在开发环境下生效,到了生产环境下如果是放到服务器上则还需要借助的反向代理来进行跨域的代理。跨域 指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对 JavaScript 施加的安全限制。同源就是指 域名,协议,端口 均相同。两个网域若 域名、协议、端口 任一不同则二者的通信就出现了跨域问题,前端的跨域问题普通存在于两个阶段,一个是开发环境...

    番茄西红柿 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<