今天看啥  ›  专栏  ›  Always_positive

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

Always_positive  · 掘金  ·  · 2021-04-08 14:03
阅读 0

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

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请求路径



原文地址:访问原文地址
快照地址: 访问文章快照