gulp经过http-proxy-middleware开启反向代理，实现跨域

时间 2020-05-30

标签 gulp 经过 http proxy middleware 开启反向代理实现栏目 JavaScript 繁體版

原文原文链接

原理同nginx开启代理，只不过写法不一样，因此直接上代码：javascript

一、gulpfile.js配置代理服务器html

gulp.task("domain3",function(){ webServer.server({ root:"./crossDomainC", port: 8082, livereload: true, middleware:function(connect,opt){ return [ proxy("/api",{ target:"https://api.douban.com/", changeOrigin:true, pathRewrite:{//路径重写规则 
                        '^/api':'' } }) ] } }); })

二、服务器页面index.htmljava

<!DOCTYPE html>
<html>
<head>
    <title>我是domain3</title>
</head>
<body>
    <p>我是domain3</p>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
     //请求本地js模拟后台数据
 $.ajax({ type: "get", url: "/api/v2/movie/in_theaters", dataType: "dataType", success: function (res) { console.log(res) } }); //请求本地js模拟后台数据
 $.ajax({ type: "get", url: "/apis/index.js", dataType: "dataType", success: function (res) { console.log(res) } }); </script>
</html>

三、这里要注意的是，这只是粗浅的了解了下这个插件的功能，具体怎么用还得多多研究，因此这里暂时只找到了一种路由转发的方法。配置里的return按理来讲能够写数组，具体怎么写还不清楚。有兴趣的朋友能够看看。jquery

四、参考nginx

　　①https://www.jianshu.com/p/a248b146c55a；web

　　②https://blog.csdn.net/weixin_33712987/article/details/87071757ajax