react中的反向代理

王元肉==>个人主页

大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。

推荐阅读

准备工作

使用create-react-app启动一个react项目
使用express编写一个不允许跨域的接口

使用express编写一个接口

1. 创建文件夹 mkdir server
2. cd server
3. npm init -y
4. npm i express
5. 新建app.js编写服务器代码

const express = require('express');
const app = express();
app.get('/test', (req, res) => {
    res.json({
        message: 'success'
    });
})
app.listen(6789);
console.log("服务器启动成功");

6. 控制台node app.js运行服务器端代码
7. 浏览器调用自测
   

为什么需要反向代理

App.js

import { useEffect } from "react";
import axios from "axios";
function App() {
  useEffect(() => {
    axios.get("http://localhost:6789/test").then(res => {
      console.log(res.data);
    }).catch(err => {
      console.log(err);
    })
  }, []);

  return (
    <div>App</div>
  );
}

export default App;

我们在reaact中使用axios调用刚才我们写好的接口，谷歌调试工具显示接口跨域。背后原因
是我们用express写的后端接口不允许跨域，然后本地的react项目和express服务器项目端口号不同，违背了同源策略。

react中怎么实现反向代理

react反向代理官方文档地址

1. 下载包：npm install http-proxy-middleware --save
2. 创建src/setupProxy.js并在其中放置以下内容

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:6789',
            changeOrigin: true,
            // 去掉我们添加的前缀，保证我们传递给后端的接口是正常的
            pathRewrite: { "^/api": '' }
        })
    );
};

3. 给网络请求添加前缀
   App.js

import { useEffect } from "react";
import axios from "axios";
function App() {
  useEffect(() => {
    axios.get("/api/test").then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err)
    })
  }, []);

  return (
    <div>App</div>
  );
}

export default App;

4. 重新npm run start启动项目
   
   
   

结束啦！