• ">

    背景：
    2020年7月19日，因为项目功能迭代，需要在原本从业务信息的合作者的网站手动录入相关数据储存到后台管理系统的方式，升级为通过其网站提供的查询每个信息更新的对应所有数据的接口，在获取数据后自动录入且可以保留原录入功能的方式。

    问题：
    请求对方提供的外网接口，无法通过后台配置“Access-Control-Allow-Origin: *”解决跨域，firstly尝试直接通过fetch对方地址的方式，提示需要配置缺少配置：no-cors。then配置完毕，发现请求成功，激动的一批。打开network查看返回数据，显示fail to load response data，心凉了一截。硬的不行就只能来软的了！

    软磨硬泡过程：

    1、一开始通过百度，发现create-react-app创建的react项目可以通过在其中的package.json中的配置proxy项，直接秒掉问题，解决跨域问题。
    a、第一次通过如下配置，修改配置之后需要重新运行项目，报错提示：when specified,”proxy” in package.json must be a string. 

    1. "proxy": {
    2.     "/api": {
    3.       "target": "http://localhost:8080",
    4.       "pathRewrite": {
    5.         "^/api" : ""
    6.       },
    7.       "changeOrigin": true
    8.     }
    9.   }

    b、第二次配置：”proxy”: [要访问的地址]，报错消失，但是查看newwork返回值，显示：you need to enable Javascript to run this app。但是查看谷歌配置之后，发现是开启的。同时发现返回的状态码一直是304。因为用了代理，浏览器的请求头里的request url等都是不会显示代理的地址的，也就无法查看代理是否成功。但是返回的一直是自身这个项目的index.html文件。足以证明：这个代理没成功。经过百度，了解到这个在新版的react代理配置中已经淘汰，继续艰苦奋斗。

    2、需要注意的是在安装依赖后，需要在项目中创建setupProxy.js文件（文件位置：src/setupProxy.js，是项目为，为非构建（dist）的本地开发源码目录下，切记不是package.json这一层，这不会被执行），进行如下配置：

    1. 依赖安装：npm i http-proxy-middleware --save
    3. 代码使用：a：const proxy = require('http-proxy-middleware');
    4.                  b: const { createProxyMiddleware } = require('http-proxy-middleware');
    5.          //注明：a种是0.x.x版本的引用方式, b种是1.0.0版本的引用方式；
    7.          module.exports = function(app) {
    8.             app.use(
    9.               proxy("/base/**", { //(a种使用方式，b种就用createProxyMiddleware代换)
    10.                 target: "http://45.32.15.21:8090/",
    11.                 changeOrigin: true,
    12.                 pathRewrite: {
    13.                   "^/api": "/"
    14.                 },
    15.               })
    16.             );
    17.             app.use(
    18.               proxy("/fans/**", {
    19.                 target: "https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",
    20.                 changeOrigin: true
    21.               })
    22.             );
    23.           };

    总结：
    现在的代理配置：最简便的方式就是通过引入http-proxy-middleware，成功突破域的界限，获取到想要的数据。