阿牛博客

前端解决接口跨域——反向代理配置(nginx和webpack)

前端解决跨域的方法有很多,比如有jsonp、CORS、document.domain+iframe、window.name、window.postMessage种种,今天介绍一下常用的方式–反向代理。本地开发(vue全家桶项目)当然是webpack的proxyTable,测试或者线上的话常用的是nginx反向代理,下面贴下代码,供需要的童鞋参考一下。

1.后端接口有统一字符串供反向代理正则匹配

如接口配置js:api.js (有统一的‘hd-deposit’字段)

ngx的配置:

webpack配置(config/index.js):

2.后端接口没有统一字符串供反向代理正则匹配

如:api.js(无统一的字段供前端使用,前端这边手动加一个‘vipServiceApi’字段)

ngx的配置

webpack配置:

配置完ngx之后需要重启ngx

当然如果是非webpack项目,有个非常简单的方法,使用http-server插件,具体方法:

1.安装http-server

2.执行命令:

给个赞() 踩一下()

温馨提示:本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知 识的误导,同时有更好的阅读体验。

本文链接: http://aniublog.com/archives/579

上一篇: DataURL, Blob, File, Image之间的关系与转换 » 下一篇: vue项目的各种优化 »