英文:
Why am I unable to get a reply from the api endpoint with axios
问题
I am sending a request to an endpoint but it doesn't return a response. The endpoint is available. Here is my code:
import './App.css';
import React, { useState, useEffect } from 'react';
import Dashboard from './Dashboard';
import Login from './login/Login';
import axios from 'axios';
export default function App() {
const [isLogged, setIsLogged] = useState(false);
const [csrf, setCsrf] = useState("");
const url = 'https://mtstorez.000webhostapp.com/app/store/welcome';
// Get login status of the user
useEffect(() => {
axios.post(url, {
key1: 'value1',
key2: 'value2'
})
.then(response => {
console.log('AJAX request successful');
// setData(response.data);
})
.catch(error => {
console.log('AJAX request failed');
// setError(error.message);
});
}, []);
return (
<main>
{isLogged ? <div> <Dashboard/> </div> : <Login/>}
</main>
)
}
I tried the jsonplaceholder endpoint to generate fake data, and it worked. I also allowed requests from all origins, but it didn't work. Thanks for your help in advance.
英文:
I am sending a request to an endpoint but it doesn't return a response. The endpoint is available.
Here is my code:
import './App.css'
import React,{useState,useEffect} from 'react'
import Dashboard from './Dashboard'
import Login from './login/Login'
import axios from 'axios'
export default function App() {
const[isLogged,setIsLogged] = useState(false);
const[csrf,setCsrf] = useState("");
const url = 'https://mtstorez.000webhostapp.com/app/store/welcome'
//get login status of user
useEffect(() => {
axios.post(url, {
key1: 'value1',
key2: 'value2'
})
.then(response => {
console.log('AJAX request successful');
//setData(response.data);
})
.catch(error => {
console.log('AJAX request failed');
//setError(error.message);
});
}, []);
return (
<main>
{
isLogged ? <div> <Dashboard/> </div> :
<Login/>
}
</main>
)
}
I tried jsonplaceholder endpoint to generate fake data and it worked. I also allowed request from all origin and it didn't work also.
Thanks for your help in advance
答案1
得分: 1
我已经尝试过您的端点，使用Postman进行POST和GET请求，都获得了正确的响应。
然而，在浏览器中尝试时，只有GET请求按预期执行。我已经设置了一个可重现的示例，链接在这里：https://github.com/jbrocher/question-76220440。POST版本出现了预检错误。
Postman和浏览器之间的行为差异指向了一个CORS（跨源资源共享）问题。
根据我在Postman中进行的测试，端点似乎在使用GET和POST时返回相同的内容，因此我建议像我在链接的存储库中所做的那样使用GET版本。如果您对端点有控制权，也应该验证您的CORS设置。
英文:
I've tried your endpoint using postman and got back a proper response both with POST and GET.
However, when tried from a browser, only the GET request performs as expected. I've set up a reproductible example here :https://github.com/jbrocher/question-76220440. The POST version fails with a preflight error.
The difference of behavior between postman and the browser points to a CORS issue.
From the test I've done with Postman, it would seem the endpoint returns the same thing both using GET and POST so I would suggest using the GET version as I did in the repository I linked. I you have control over the endpoint, should verify your CORS settings as well.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论