使用Axios从Express后端向React前端传递文本数据失败，该如何排查解决？

• 请求地址错误：你的React开发服务默认运行在3000端口，Express后端运行在3001端口。Axios不指定完整请求地址时，默认会请求当前页面所在的域名端口，也就是你调用axios.get('/')实际请求的是http://localhost:3000/，这个地址返回的就是React的入口HTML文件，所以你拿到的是模板内容而非后端数据。
• 跨域限制：前后端端口不同属于跨域场景，即使你填对了后端地址，默认情况下浏览器也会拦截请求。
• setState异步特性：你调用setState后立刻打印this.state.categories，拿到的还是更新前的旧值，就算请求成功也看不到最新数据。

1. 配置后端CORS支持 #

在Express项目中安装cors包：

npm install cors

修改Express代码引入并使用cors：

const express = require('express');
const app = express();
const cors = require('cors')
app.use(cors()) // 放在所有路由定义之前

var fs = require('fs')
var data1 = fs.readFileSync('./inputs/category1.txt', 'utf8')
var textByLine1 = data1.split('\r\n')
var data2 = fs.readFileSync('./inputs/category2.txt', 'utf8')
var textByLine2 = data2.split('\n')

console.log(textByLine1)

app.get("/", function(req, res){
    res.send(textByLine1)
})
app.listen(3001, function(){
    console.log("express server is running on port 3001");
})

2. 修正请求地址 #

有两种可选方案：

• 方案一：直接填写完整后端地址，修改Axios封装代码：

import axios from 'axios';

export type ApiClient = {
    getProperties: (c:number) => Promise<string[]>;
}

export const createApiClient = (): ApiClient => {
    return {
        getProperties: async (c:number) => {
            // 替换为后端完整地址
            const res = await axios.get('http://localhost:3001/', { params: { category: c} });
            return res.data;
        }
    }
}

export default createApiClient

• 方案二：配置React开发代理，不用修改请求路径。在React项目的package.json文件中添加配置项：

"proxy": "http://localhost:3001"

配置后原有的axios.get('/')会自动被代理到后端3001端口，无需修改请求代码。

3. 调整打印逻辑验证数据 #

因为setState是异步操作，你可以在setState的回调中获取更新后的state，或者直接打印接口返回的原始数据：

async componentDidMount() {
  const res = await api.getProperties(this.state.flow)
  console.log('接口返回数据：', res)
  this.setState({
    categories: res
  }, () => {
    console.log('state更新后的值：', this.state.categories)
  });
}

内容的提问来源于stack exchange，提问作者Noa