美文网首页
使用node反向代理解决开发环境和生产环境的跨域问题

使用node反向代理解决开发环境和生产环境的跨域问题

作者: 五年高考 | 来源:发表于2018-09-09 21:47 被阅读0次

有兴趣的小伙伴可以加Q群 879108483 互相学习
话不多说,直接开搞

  1. 新建文件夹,然后进入后初始化
    npm init
    // 然后一路回车
  1. 安装插件
    npm install express http-proxy-middleware --save

或者

    yarn add express http-proxy-middleware
  1. 在根目录里面新建proxy.js,写入如下代码
  const express = require('express');
  const proxy = require("http-proxy-middleware");
  const app = express();

  app.use('/apis/**',
      proxy.createProxyMiddleware({
          // 代理目标地址
          target: "http://www.soso.com",
          changeOrigin: true,
          pathRewrite: {
              // 地址重写
              "/apis": "/"
          }
      }));


  app.listen(8089, () => {
      console.log("项目启动与:http://localhost:8089");
  })

上面的意思呢 是监听8089端口,然后反向代理http://www.soso.com,我们用 node proxy.js 启动
然后访问 http://localhost:8089/apis/a,可以发现我们
已经访问到了 http://www.soso.com/a 反向代理成功
现在要测试一下这个能不能用

使用方法

  1. 新建server.js (写api用的)
  var express = require('express');

  var app = express();

  app.get("/testapi", (req, res) => {
      res.send({ data: "我来组成测试数据!" });
  })

  app.listen(8090, () => {
      console.log("项目启动与:http://localhost:8090");
  })

然后node server.js 启动服务,浏览器访问http://localhost:8090/testapi
可以看到返回来的数据{"data":"我来组成测试数据!"} 说明服务已经启动成功

2 新建 client.js

  <!DOCTYPE html>
  <html lang="en">

  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  </head>

  <body>
      <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
      <script>
          // 通过ajax 调用api
          $.get("/apis/testapi", function (result) {
              alert(JSON.stringify(result));
          });
      </script>
  </body>

  </html>

然后修改一下proxy.js

  const express = require('express');
  const proxy = require("http-proxy-middleware");
  const app = express();

  app.use('/apis/**',
      proxy.createProxyMiddleware({
          // 代理目标地址
          // **修改了这里
          target: "http://localhost:8090",
          changeOrigin: true,
          pathRewrite: {
              // 地址重写
              "/apis": "/"
          }
      }));
      
  // **修改了这里
  app.get("/", (req,res) => {
      res.sendfile("./client.html");    
  })


  app.listen(8089, () => {
      console.log("项目启动与:http://localhost:8089");
  })

重新启动 proxy.js (node proxy.js) ,访问地址 http://localhost:8089/ 发现已经调用api成功啦

如果在spa项目 比如vue react 中使用代理

在官方的脚手架中基本都带有跨域的解决方案,本例先不讲这个直接将当前的场景中怎么解决

  1. 启动vue/react,然后只需要在 proxy.js 中更改一点代码,新代理我们的react/vue启动的那个地址
    就行啦,讲api和网页的两个域名代理到一个域来就不存在跨域了。
  const express = require('express');
  const proxy = require("http-proxy-middleware");
  const app = express();

  app.use('/apis/**',
      proxy.createProxyMiddleware({
          // 代理目标地址
          target: "http://localhost:8090",
          changeOrigin: true,
          pathRewrite: {
              // 地址重写
              "/apis": "/"
          }
      }));

  app.use("/",
      proxy({
          // 这里是vue/react启动后需要访问网页的地址
          // **修改了这里
          target: "http://localhost:3000",
          changeOrigin: true,
      }))

  // app.get("/", (req, res) => {
  //     res.sendfile("./client.html");
  // })


  app.listen(8089, () => {
      console.log("项目启动与:http://localhost:8089");
  })

然后访问:http://localhost:8089 可以看到我们已经访问到了项目。在里面调用api的的时候要注意
,比如调用 http://localhost:8090/testapi ,我们已经代理了 http://localhost:8090这个域,
在调用的时候 url 只需要写上 /apis/testapi ,就可以正常访问到了

大功告成,发布版本的时候可以让运维用nginx配置一下代理,也可以直接把这个修改一下直接发布node的一个服务

相关文章

网友评论

      本文标题:使用node反向代理解决开发环境和生产环境的跨域问题

      本文链接:https://www.haomeiwen.com/subject/isodgftx.html