react axios配置代理（proxy)，解決本地開發時的跨域問題

前言

本文基於 (“react”: “^16.13.1”) 版本
react官方腳手架默認是將webpack配置隱藏起來了，在進行配置之前需要將webpack給暴露出來。

1.輸入命令 npm run eject

會出現一個命令提示：這是一個單向操作，確認操作後不可逆轉/返回?
輸入 y 回車
成功之後 在項目根目錄出現 config 文件夾

2.打開 config 文件夾下的 webpackDevServer.config.js 文件

3.進行搜索 proxy ,大概在 104 行的位置
4.參照如下格式，配置代理

 // 配置代理
 proxy: {
	'/api': {
        target: 'http://localhost:9000', // 後臺服務地址以及端口號
        ws: true,
        changeOrigin: true, //是否跨域
        pathRewrite: { '^/api': '/' }
      }
 },

5.在項目中使用， /api + 後臺接口地址

爲了方便演示，在 componentDidMount 生命週期進行 axios 請求。

注：本文接口地址基於我自己公司後臺同事提供的後臺地址，實際使用中須替換你自己後臺同事的地址

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

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

export default App;

7.請求結果

8.如果不想使用 api 作爲代理名稱

第二行以及第六行需要同時更改，否則不生效
項目需要重新啓動，否則不生效

proxy: {
	'/xlz': {
        target: 'http://192.168.1.8:8022',
        ws: true,
        changeOrigin: true, //是否跨域
        pathRewrite: { '^/xlz': '/' }
      }
},