个人中心
gpt4 book ai didi

API requests are not being called from frontend(API请求未从前端调用)

转载 作者：bug小助手 更新时间：2023-10-24 23:36:00 28 4
gpt4 key购买 nike



I am trying to write front-end api requests for a simple project of mine.

我正在尝试为我的一个简单项目编写前端API请求。


const [beerData, setBeerData] = useState<Record<string, Beer>>({});
const [personData, setPersonData] = useState<Record<string, Person>>({});

useEffect(() => {
  fetchData();
}, []);

const fetchData = async () => {
  try {
    setBeerData(await getBeersData());
    setPersonData(await getPersonsData());
  } catch (error: any) {
    console.error(error.message);
  }
};

async function getPersonsData(): Promise<Record<string, Person>> {
    console.log("persopn");
    try {
        console.log(1);
        const response = await axios.get(`${server_path}${api_path}/person`);
        console.log(2);
        return response.data as Record<string, Person>;
    } catch (error: any) {
        console.error(error.message);
        return {};
    }
}

async function getBeersData(): Promise<Record<string, Beer>> {
    try {
        const response = await axios.get(`${server_path}${api_path}/beer`);
        return response.data as Record<string, Beer>;
    } catch (error: any) {
        console.error(error.message);
        return {};
    }
}

The problem is I have data on my server, the API is working, none of my console logs are being displayed and the data on the client side is empty.

问题是我的服务器上有数据，API工作正常，没有显示我的控制台日志，客户端的数据是空的。


Any ideas on what the issue might be?
Thank you very much in advance.

对于问题可能是什么，有什么想法吗？非常提前感谢您。


EDIT:

编辑：


I figured out the requests were hanging because of CORS.
I added the following settings to my vite configuration file:

我发现申请被搁置是因为CORS。我在VITE配置文件中添加了以下设置：


    server: {
    proxy: {
      '/api': {
        target: 'http://localhost:4999/',
        changeOrigin: true,
      },
    }
  },

The requests are still hanging. I setup cors by just doing app.use(cors)

请求仍然挂着。我通过执行app.use（cors）来设置cors


更多回答
优秀答案推荐

there's bit missing from you sample to consider.

你的样品中有一些需要考虑的地方。


start by refactoring the await calls to variables and check that they log anything

首先重构对变量的等待调用，并检查它们是否记录了任何内容


const fetchData = async () => {
  try {
    const beersResponse = await getBeersData()
    console.log('what was returned?', beersResponse)

    setBeerData(beersResponse);
  } catch (error: any) {
    console.error(error.message);
  }
}

you may also need to run a json.parse() / response.json() on the response before returning from the apiClient.

在从apiClient返回之前，您可能还需要在响应上运行json.parse()/ponse.json()。


if you're getting logs it mean that get*data methods aren't executing.

如果您获得的是日志，则意味着Get*Data方法没有执行。


you may also need to handle json data?

您可能还需要处理json数据？


return response.json(); || return JSON.parse(response)

noting you've typed it as a string should it be a string or json data?

注意，您已经将其作为字符串输入，它应该是字符串还是json数据？


更多回答

I edited the code with the stuff I have figured out.

我用我想出来的东西编辑了代码。

nice, cors errors are always a little tricky to spot and resolve

很好，CORS错误总是很难发现和解决

I didn't solve it though, that's the issue :)

我没有解决这个问题，这就是问题所在：)

there's a lot of reasons for CORS errors you'll need to update your question with error details or make a new one. you'll need to consider api allowed origins, if https is requried by the api, that axios has no-cors mode set. We can't help you without an updated question.

CORS错误有很多原因，您需要使用错误详细信息更新您的问题，或者创建一个新的错误。您需要考虑API允许的来源，如果API要求使用HTTPS，那么axios设置了no-cors模式。如果没有最新的问题，我们无法帮助您。

28 4 0
文章推荐： Extjs Scroll bar automatically scroll down preventing me from scrolling to the top(Extjs滚动条自动向下滚动，防止我滚动到顶部)
文章推荐： Pressing `Shift+Tab` after selecting multiple lines in VSCode should reindent them, but it doesn't(在VSCode中选择多行后按`Shift+Tab`应该会重新缩进它们，但它不会)
文章推荐： TypeError: run_simple() got an unexpected keyword argument 'jupyter_mode'(TypeError：Run_Simple()获得意外的关键字参数‘jupyter_mode’)
文章推荐： How to extend validation rule only for some RuleSets(如何仅为某些规则集扩展验证规则)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com