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

最新推荐文章于 2025-06-03 09:12:43 发布

转载最新推荐文章于 2025-06-03 09:12:43 发布 · 484 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/helloNico/p/10688200.html

文章标签：

#javascript #ViewUI

本文介绍如何使用Gulp配置代理服务器，实现跨域请求。通过gulpfile.js文件设置，可将请求转发至目标服务器，如Douban API。代码示例展示了如何使用proxy中间件进行路径重写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理同nginx开启代理，只不过写法不同，所以直接上代码：

1、gulpfile.js配置代理服务器

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':''
                    }
                })
            ]
        }
    });
})

2、服务器页面index.html

<!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>