axios中的GET/POST不工作,但fetch工作

iqxoj9l9  于 2023-08-04  发布在  iOS
关注(0)|答案(1)|浏览(124)

我在Heroku上托管了一个REST API。它由Express,NodeJS和MongoDB(Mongoose作为orm和MongoDB Atlas)组成。我用的是MERN stack。这里是初学者😅
API链接:

<a href="https://mern-deploy-test-adib.herokuapp.com/api/todos">/api/todos</a>

字符串
API与Postman和VS代码的API插件一起工作得很好。它在本地主机上也工作得很好。
但是当我尝试使用axios进行GET/POST时,它给出了:
错误:“网络错误”
但是fetch()工作得很好。 Postman 也是。
另外,控制台中的I see cors警告:
已阻止跨源请求:同源策略不允许阅读https://mern-deploy-test-adib.herokuapp.com/api/todos上的远程资源。(原因:CORS标头“Access-Control-Allow-Origin”与“http://localhost:3000/'”不匹配)
但我把cors设置成这样

app.use(cors({ origin: 'http://localhost:3000/', credentials: true }))


有趣的是,API在localhost中工作,但在部署后,它不能与axios一起工作。
我已经设置了cors origin: 'http://localhost:3000/',并且检查了fetch和axios GET请求的头部。它们在字面上是一样的。
请求头有Access-Control-Allow-Origin http://localhost:3000/
顺便说一句,我的前端托管在localhost:3000
为什么会发生这种事呢?为什么axios不工作而fetch工作。
编辑:这是axios和fetch请求的代码。

//fetch
fetch(`https://heroku-api-link/api/todos`)
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.log(err))

//axios
axios.get(`https://heroku-api-link/api/todos`)
.then(data => console.log(data))
.catch(err => console.log(err))


EDIT#2:我在手机上使用编辑器(SPCK编辑器)尝试了一个axios请求。请求成功。我只是不明白为什么它不能从我的电脑工作。

ozxc1zmp

ozxc1zmp1#

我终于想通了!!其实是我在cors里设置的源链接。我将原点设置为http://localhost:3000/。但有趣的是,客户端源(也是http://localhost:3000/)与服务器中的源不匹配。但是,当我将服务器cors origin更改为http://localhost:3000时,从origin中删除'/'解决了这个问题。我不知道为什么它没有工作,但我很高兴它做到了。现在我需要解释为什么它工作。是不是跟具体的路线有关?就像添加'/'使得只有“Home”路由才能工作一样?

相关问题