zl-node-proxy v1.0.7

zl-node-proxy

使用node开发的一个请求代理模块

安装模块

 npm i zl-node-proxy -D

使用此代理模块（以react项目为例）

此模块开发目的：为了在已经启用脚手架中的代理模块的基础上，在创建另一个更加定制化的代理跨域服务而开发的第三方模块

说明： 1. 由于此代理服务端口和react页面服务不是同一个端口，所以不会和react项目中已经开启的代理服务进行冲突，即可以两个代理服务共用。 2. 如果只想使用本模块作为代理跨域服务也可以的，本模块会完整的转发你在页面产生的所有跨域请求

使用流程 1. 在react项目根目录创建配置文件 zl_node_proxy.config.js

let createProxyServe = require("zl-node-proxy");

// 构造代理请求服务器
createProxyServe({
    port: 3333, //代理服务的端口,默认3213，可任意设置，只要设置的端口没有被占用即可。
    proxyUrlObj: {// 两个代理地址
        "/api1": "http://xxxxxxxxxxxx.cn",
        "/api2": "http://baidu.com",
    },
    // headers: ["content-type"],//表示只允许转发content-type请求头（headers也可以为Boolean类型，为true表示转发所有的请求头，为false表示不转发任何请求头）
    delHeaders: ["content-type"],//表示删除content-type请求头，然后其他的都允许转发
    customHeaders: { //在上面允许转发的请求头的基础上，追加下面的请求头字段
        "origin": "http://xxxxxxxxxxxx.cn",
    }
});

2. 在react项目的package.json中的start脚本命令中追加命令：node ./zl_node_proxy.config.js

如：
原本的start命令：  "start": "react-scripts start",
修改后的start命令："start": "react-scripts start | node ./zl_node_proxy.config.js",

3. 在项目中使用此代理服务，具体两点

   1. 在react项目的入口文件中向React对象添加代理地址变量,如下

         /* 
          设置了两个代理地址
          注意：
           1. 下面的端口需要和代理地址的端口保持一致 
           2. 下面的代理地址 proxyUrl1，proxyUrl2等，应该和zl_node_proxy.config.js配置文件中设置的是一致的，否则会对不上
           3. 如果你想让局域网的其他电脑访问你的页面，请把下面的127.0.0.1换成你电脑在的真正IP地址
         */
          React.$proxyUrl1="http://127.0.0.1:3125/proxyUrl1";
          React.$proxyUrl2="http://127.0.0.1:3125/proxyUrl2";

   2. 在具体组件中使用这个代理，如下

      请求示例：
              var url = React.$proxyUrl1 + '/problems/tags/all';
              axios.get(url).then(d => console.log(d.data));
            }}> /problems/tags/all 
      
      具体组件示例：
      
      import React from 'react';
      import axios from 'axios';
      import logo from './logo.svg';
      import './App.css';
      
      function App() {
        return (
          <div className="App">
            <button onClick={() => {
              var url = React.$proxyUrl1 + '/problems/tags/all';
              axios.get(url).then(d => console.log(d.data));
            }}> /problems/tags/all 
          </button>
      
            <br />
      
            <button onClick={() => {
              var url = React.$proxyUrl1 + '/problems';
              var data = {
                "title": "测试12",
                "difficulty": "SIMPLE",
                "topicTags": [
                  "栈",
                  "数组"
                ],
                "codeSnippets": [
                  {
                    "lang": "C++",
                    "code": "/**\n * Definition for singly-linked list.\n * struct ListNode {\n * int val;\n * ListNode *next;\n * ListNode() : val(0), next(nullptr) {}\n * ListNode(int x) : val(x), next(nullptr) {}\n * ListNode(int x, ListNode *next) : val(x), next(next) {}\n * };\n */\nclass Solution {\npublic:\n ListNode* addTwoNumbers(ListNode* l1, ListNode* l2) {\n\n }\n};"
                  },
                  {
                    "lang": "Java",
                    "code": "/**\n * Definition for singly-linked list.\n * public class ListNode {\n * int val;\n * ListNode next;\n * ListNode() {}\n * ListNode(int val) { this.val = val; }\n * ListNode(int val, ListNode next) { this.val = val; this.next = next; }\n * }\n */\nclass Solution {\n public ListNode addTwoNumbers(ListNode l1, ListNode l2) {\n\n }\n}"
                  }
                ],
                "description": "<p>hello</p>"
              };
              axios.post(url, {
                data: data
              }).then(d => console.log(d.data));
            }}>  /problems</button>
      
            <br />

      </div>
    );
  }
  
  export default App;
  
  ```

4. 启动服务 ：npm run start

5. 运行测试

6. 代理请求日志（当正式请求时，会自动将代理的实际请求和相关结果在控制台打印出来）

提示

如果担心代理服务的日志和本身页面服务的日志冲突和影响 可以不修改原本的脚本命令，如start，build,test 等，而是直接在package.json中加一个脚本命令，如下

 原本的start命令：  
     "start": "react-scripts start",

 在start命令后再添加一个命令： 
     "start": "react-scripts start",
     "proxyServe": "node ./zl_node_proxy.config.js",

 这样执行npm run start启动项目时，在新开个终端窗口额外执行下proxyServe命令：npm run proxyServe 启动代理服务即可（你的启动命令不一定时start,不过这个无所谓，执行你的实际启动命令即可）

 这时由于代理服务和页面服务是在不同的终端窗口的，所以互相不会影响