当我使用 React.js 在 Heroku 中使用 Axios 执行 GET 请求时，我应该使用哪个基本 url

Posted 2023-03-11

【中文标题】当我使用 React.js 在 Heroku 中使用 Axios 执行 GET 请求时，我应该使用哪个基本 url

【英文标题】：Which base url should I use when I perform GET request with Axios in Heroku with React.js

【发布时间】：2021-04-12 15:21:00

【问题描述】：

我正在使用 MERN 堆栈应用程序。当我在本地运行此应用程序时，它可以完美运行，但我不确定为什么当我在 Heroku 中运行我的应用程序时，我的 Axios 获取请求在我的 React 组件中不起作用。

在这段代码中，Axios get 调用返回给我一个普通的 html 对象。

import  useState, useEffect from "react";
const axios = require('axios').default;

function MyReactComponent() 

    const [data, setData] = useState([]);

    useEffect(() => 

        axios.get("/api/standings").then(response => 
            const myData = response.data

            console.log(myData);

            //logs a plain html object working in heroku
        );

    , []);

    return (
        <div>
            <h1>Hello, this is an example</h1>
        </div>
    )


export default MyReactComponent;

当我使用 Promise 执行此操作时，它会记录未定义：

import  useState, useEffect  from "react";
const axios = require('axios').default;

function MyReactComponent() 

    useEffect(() => 

        const [data, setData] = useState([]);

        return new Promise((resolve, reject) => 
            axios
                .get("/api/standings")
                .then(res => 
                    resolve(res.data)
                    console.log(resolve(res.data))

                    //logs undefined working in heroku
                , err => reject(err));
        );
    );

    return (
        <div>
            <h1>Hello, this is an example</h1>
        </div>
    )


export default MyReactComponent;

我必须指出，在本地工作我必须在我的前端文件夹中的“package.json”中使用代理，以使 Axios 执行请求而不会出现 404 错误：

"proxy": "http://localhost:4000"

我知道如果我在执行 Axios 调用时输入“/ANYTHINGELSE”，则基本 URL 是“https://appname.herokuapp.com”。那我该怎么办？

【问题讨论】：

您是否尝试在不使用“.default”的情况下导入？

是的，我试过不使用“.default”并像“import axios from 'axios'”一样导入。没有任何变化

那么如果你在本地主机上使用代理，你应该使用this link提供的axios初始化不记名令牌，以免得到未经授权的响应。

谢谢，但我在正常请求的任何部分都没有使用不记名令牌，所以如果我尝试将该代码添加到我的 JS 文件中，则未定义令牌。我已经尝试按照您告诉我的方式查找其他帖子，但这对我不起作用。我真的不明白，我看过很多人和我一样的视频，他们用 axios 从他们的数据库中获取数据没有问题

很明显它与 axios 本身无关，但不可能从你的 repo 和背景之外进行调试

【参考方案1】：

我已经解决了，不是axios问题，更不是前端问题。

在我的后端，定义我的服务器的 index.js 文件是这样的：

require("dotenv").config();
const express = require("express");
const app = express();
var cors = require('cors')
const path = require('path');
const bodyParser = require("body-parser");
const mongoose = require("mongoose");


//SETTINGS
app.use(cors());
app.set("port", process.env.PORT || 4000);

.
. //ETC
.

//THEN, Defining what front-end should show if heroku is on production

if (process.env.NODE_ENV === 'production') 
    app.use(express.static(path.join(__dirname, '../../frontend/build')));
    app.get('*', (req, res) => 
        res.sendFile(path.join(__dirname, '../../frontend/build/index.html'));
    )

//And then my server routes...

//ROUTES
app.use("/api/standings", require("./routes/standings"));
app.use("/api/races", require("./routes/races"));
app.use("/api/f1datas", require("./routes/f1datas"));


.
.//More code
.

这最后的部分应该被交换

//ROUTES
app.use("/api/standings", require("./routes/standings"));
app.use("/api/races", require("./routes/races"));
app.use("/api/f1datas", require("./routes/f1datas"));

//THEN

if (process.env.NODE_ENV === 'production') 
    app.use(express.static(path.join(__dirname, '../../frontend/build')));
    app.get('*', (req, res) => 
        res.sendFile(path.join(__dirname, '../../frontend/build/index.html'));
    )