• nodejs 反向代理,前后的分离 解决方案


    我们前端小伙伴们在前后端分离时,会遇到不想求人调接口调数据的情况,就是想做个万事不求人的优雅美男子,

    特别是在工作繁忙时,不想给其他大佬添麻烦,所以还是花两分钟,自己开启一个优雅的node服务,自己跟自己玩更帅一点。

    操作步骤如下:

    1. 新建一个文件夹

    2.cd进入文件目录中

    3.依次进行

        初始化 :  npm init

        下载依赖包:npm install http-proxy

    4.创建2个文件: person.json、index.js 

      personlist.json文件的内容为(随便啥内容都行):

     { 
      "name""heheda",
       "age"24,
       "discription""this is test!",
       "ok"true
     }

      index.js 文件的内容为(根据个人情况配置对应的参数):

    var http = require('http'), httpProxy = require('http-proxy');
    
    // 新建一个代理 Proxy Server 对象  
    var proxy = httpProxy.createProxyServer({});
    var fs = require("fs")
    
    // 捕获异常  
    proxy.on('error', function (err, req, res) {
      res.writeHead(500, {
        'Content-Type': 'text/plain'
      });
      res.end('Something went wrong. And we are reporting a custom error message.');
    });
    
    // 在每次请求中,调用 proxy.web(req, res config) 方法进行请求分发  
    var server = http.createServer(function (req, res) {
      var host = req.url
      switch (host) {
        case '/ranking/gender':  //需要测试的接口地址
          fs.readFile(__dirname + "/" + "person.json", "utf-8", function (err, data) {
            res.end(data)
          })
          break;default:
          res.writeHead(200, {
            'Content-Type': 'text/plain'
          });
          res.end('Welcome to my server!');
      }
    
    });
    
    // 启动服务
    var PORT = 3000
    server.listen(PORT, function () {
      console.log('server is running at %d', PORT);
    })

    然后开启服务:node index.js

    然后就可以看到:server is running at 3000

    服务就开启成功了,剩下的就是开启前端项目服务,做好反向代理proxy,自己写数据,自己测接口了

      devServer: {
        open: false// 是否自动打开浏览器页面
        host: '0.0.0.0'// 指定使用一个 host,默认是 localhost
        port: 8080// 端口地址
        https: false// 使用https提供服务
        // 这里写你调用接口的基础路径,来解决跨域,如果设置了代理,那你本地开发环境的axios的baseUrl要写为 '' ,即空字符串
        proxy: 'http://127.0.0.1:3000'
      },
    1. 请求结果:
    2. Request URL:
      http://localhost:8080/ranking/gender/
    3. Request Method:
      GET
    4. Status Code:
      200 OK
    5.  
      Remote Address:
      127.0.0.1:8080
  • 相关阅读:
    关于margintop/bottom在nonReplaced inline元素上不起作用的解释
    css position
    css :three column +top box
    little box: two box
    css layout :center
    Absolute, Relative, Fixed Positioning: How Do They Differ?
    little box:three column
    利用position:absolute重叠元素
    C#生成(操作)PDF
    asp.net发布网站时三个选项的问题
  • 原文地址:https://www.cnblogs.com/bomdeyada/p/12762074.html
Copyright © 2020-2023  润新知