react axios配置代理(proxy),解决本地开发时的跨域问题

本文基于 react 17.x 版本

安装axios

npm install axios 

1.输入命令 npm run eject
运行报错的话点这里

2.打开 config 文件夹下的 webpackDevServer.config.js 文件
react axios配置代理(proxy),解决本地开发时的跨域问题
3.进行搜索 proxy ,react axios配置代理(proxy),解决本地开发时的跨域问题
将代码改成

proxy: {
// ‘/api’可以更改其他比如‘/ps’
      "/api": {
        target: "http://lochost:3000", // 后台服务地址以及端口号
        ws: true,
        changeOrigin: true, //是否跨域
        pathRewrite: { "^/api": "/" },
      },
    },

5.在项目中使用, /api + 后台接口地址

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
  componentDidMount() {
    axios.get('/api/login')
      .then(res => {
        console.log(res);
      })
  }
}

export default App;
上一篇:NodeJs 全局模块引用 NODE_PATH


下一篇:react路由