create-react-app脚手架 - 跨域、反向代理

╰+攻爆jí腚メ 2023-06-20 06:41 29阅读 0赞

> 在做前后端分离的项目的时候，调用接口我们都会遇到跨域的问题。解决跨域问题可以后台设置cros(跨域资源共享)，如果前端解决的话可以使用代理，接下来一起来看一下`create-react-app`脚手架下如果配置

## 一、只代理一个 ##

在`package.json`文件中增加如下配置：

"proxy": "http://www.wyunfei.com"  // 配置你要请求的服务器地址

结果，如下

![format_png][]

王云飞亲测成功.png

注意，鼠标悬浮请求地址还是没有变化，但是其实已经帮我们代理到来了`http://www.wyunfei.com/`这个地址上了，否则我的请求绝对会`404`，因为在我这里根本就没有这个**API**啊。

## 二、代理多个 ##

在`package.json`文件中继续增加如下配置：

"proxy":{
        "/manage": {
          "target": "http://admintest.happymmall.com",
          "changeOrigin": true
        },
        "/user/logout.do": {
          "target": "http://admintest.happymmall.com",
          "changeOrigin": true
        }
      },

结果，如下

![format_png 1][]

image.png

报错了，啥意思？  
**提示只支持string类型,不支持object**  
create-react-app 的版本在低于 2.0 的时候可以在 package.json 增加 proxy 配置， 配置成如下：

"proxy":{
       "/manage":{
          "target":"http://admintest.happymmall.com",
          "changeOrigin": true
        }
      }

create-react-app 的版本高于 2.0 版本的时候在 package.json 只能配置 string 类型， 配置成如下：

"proxy": "http://www.wyunfei.com"  // 配置你要请求的服务器地址

解决方案

安装`http-proxy-middleware`

npm i http-proxy-middleware

在`src/下新建setupProxy.js`

/**
     @Author：Wyunfei
     @Date：2019/3/26/16:14
     @FileName: setupProxy.js
     */
    const proxy = require("http-proxy-middleware");
    
    module.exports = function(app) {
        app.use(proxy("/manage", {
            target: "http://admintest.happymmall.com" , //配置你要请求的服务器地址
            changeOrigin: true,
        }))
        app.use(proxy("/manage/api", {
            target: "http://admintest.happymmall.com:7000" ,
            changeOrigin: true,
        }))
    };

结果，测试成功！！！

![format_png 2][]

王云飞亲测 - 成功

注意，在config/paths.js里面修改setupProxy.js的引用路径

## 三、配置中主要的参数说明 ##

'/api'

捕获API的标志，如果API中有这个字符串，那么就开始匹配代理，  
比如API请求`/api/users`, 会被代理到请求 [http://www.baidu.com/api/users][http_www.baidu.com_api_users] 。

target

代理的API地址，就是需要跨域的API地址。  
地址可以是域名,如：`http://www.baidu.com`  
也可以是IP地址：`http://127.0.0.1:3000`  
如果是域名需要额外添加一个参数`changeOrigin: true`，否则会代理失败。

pathRewrite

路径重写，也就是说会修改最终请求的API路径。  
比如访问的API路径：`/api/users`,  
设置`pathRewrite: {'^/api' : ''},`后，  
最终代理访问的路径：`http://www.baidu.com/users`，  
这个参数的目的是给代理命名后，在访问时把命名删除掉。

changeOrigin

这个参数可以让target参数是域名。

secure

`secure: false`,不检查安全问题。  
设置后，可以接受运行在 HTTPS 上，可以使用无效证书的后端服务器

### 其他参数配置查看http-proxy-middleware文档 ###

作者：王云飞\_小四\_wyunfei  
链接：https://www.jianshu.com/p/58a12bc4a1de  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNTMxMTEwNC1hZmZkZjdkZDhkNzgwMTUzLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzEwNjkvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNTMxMTEwNC04YmQ2YjU3OGM1MzViM2M1LnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzExMjcvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNTMxMTEwNC1hNjEzYzQ5ZDYxZmE0NTczLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzEwMjkvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[http_www.baidu.com_api_users]: https://links.jianshu.com/go?to=http%3A%2F%2Fwww.baidu.com%2Fapi%2Fusers