从reactjs调用时，axios api没有收到调用答案

【问题标题】：Axios api doesn't receive call when called from reactjs从reactjs调用时，axios api没有收到调用
【发布时间】：2019-09-11 07:17:36
【问题描述】：

我有一个用 axios 编写的可用 Rest API。当我运行 API 并通过常规脚本进行调用时，一切都按预期工作。当我从一个反应项目进行相同的调用时，该调用没有到达 API 并且客户端获取并出错。

如果使用像 https://jsonplaceholder.typicode.com/todos/1 这样的外部 API，react 调用可以正常工作

来自脚本的调用：

import api from 'api'

api.get('/test')
.then(response => {console.log(response.data.msg)})  // Prints out a message
.catch(e => {console.log(e)})

来自 react 项目的调用：

import Form from "react-bootstrap/Form";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import Button from "react-bootstrap/Button";
import api from 'api'

const Workout = (props: any) => {

    const handleSave = (e: any) => {
        e.preventDefault();

        console.log('Calling API')  // This is printed so I know the code runs

        api.get('/test')
        .then(response => {console.log(response.data.msg)})
        .catch(e => {console.log(e)}) // Prints out an error
    };


    return (
        <tr>
            <td colSpan={4}>
                <Form onSubmit={handleSave}>
                    <Form.Group>
                        <Row>
                            <Col>
                                <Button
                                    variant="primary"
                                    type="submit"
                                    onClick={handleSave}
                                >
                                    Test
                                </Button>
                            </Col>


                            <Col></Col>
                            <Col></Col>
                            <Col></Col>
                        </Row>
                    </Form.Group>
                </Form>
            </td>
        </tr>
    );
};

api文件：

import axios from 'axios'

const api = axios.create({
    baseURL: `/myApi`,
    proxy: {
        host: '127.0.0.1',
        port: 4000
    }
})

export default api

当我单击按钮时，我在控制台中看到Calling API，然后出现此错误：

Error: Request failed with status code 404
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:60)

【问题讨论】：

API 在哪里运行？你的 React 客户端应用程序必须有一个服务器来发送请求。 axios 只是一个发送请求的客户端，它实际上并不能接收它们或部署一个可以的服务器。
@RutherfordWonkington 服务器在本地运行，端口 3000 上的 express
尝试将您的baseURL 设置为“localhost:3000”
404 表示您无权访问您请求的资源，因为它可能不存在，请检查 baseURL 是否正确以及您的资源是否存在。
@RohitKashyap 我检查了。我很确定问题与我从反应项目发送请求的事实有关。我认为这是因为当我尝试从常规脚本访问 API 时（正如我在问题中所写），我得到了预期的响应。

标签： reactjs axios

【解决方案1】：

要在开发过程中完成这项工作，请将 "proxy": "http://localhost:4000" 添加到您的 package.json 中。这会将请求从它正在运行的端口代理到 API 所在的端口 4000

以下是有关代理请求的 react 文档以及解决方案的工作原理：https://create-react-app.dev/docs/proxying-api-requests-in-development

【讨论】：

React 项目在端口 4000 上，API 在 3000 上，所以我设置了"proxy": "http://localhost:4000"，它成功了！你能解释一下为什么会这样吗？