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

原理同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>
复制代码

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

4、参考

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

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

posted @   Hello_nico  阅读(1973)  评论(0)  编辑  收藏  举报
编辑推荐：
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
阅读排行：
· ThreeJs-16智慧城市项目（重磅以及未来发展ai）
· 软件产品开发中常见的10个问题及处理方法
· Vite CVE-2025-30208 安全漏洞
· MQ 如何保证数据一致性？
· 互联网不景气了那就玩玩嵌入式吧，用纯.NET开发并制作一个智能桌面机器人（四）：结合BotSharp
点击右上角即可分享
微信分享提示
AI原生IDE