React-22:React脚手架配置axios代理

0 阅读1分钟

1:给项目安装axios

npm install axios

2:导入axios工具包

import axios from 'axios';

3:给React脚手架添加中间代理实现跨域(方法一)

  • 在项目的package.json文件中添加下面的一句话
  • 将请求修改为React脚手架对应的端口
  • 注意事项:并不是配置了代理,所有的请求都会通过代理,而是本地端口没有的请求才会询问代理端口。

4:给React脚手架实现跨域请求(方法二)

  • 配置多个代理
  1. 在src文件中添加setupProxy.js文件
  2. setupProxy.js中写的是common.js语法
  3. setupProxy.js中的文件内容
const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        proxy('/api1',{
            target: 'http://localhost:5000',
            changeOrigin: true,
            pathRewrite: {'^/api1':''}
        }),
        proxy('/api2',{
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite: {'^/api2':''}
        })
    )
}
  1. 修改axios请求路径