我在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请求。请求成功。我只是不明白为什么它不能从我的电脑工作。
1条答案
按热度按时间ozxc1zmp1#
我终于想通了!!其实是我在cors里设置的源链接。我将原点设置为
http://localhost:3000/
。但有趣的是,客户端源(也是http://localhost:3000/
)与服务器中的源不匹配。但是,当我将服务器cors origin更改为http://localhost:3000
时,从origin中删除'/'
解决了这个问题。我不知道为什么它没有工作,但我很高兴它做到了。现在我需要解释为什么它工作。是不是跟具体的路线有关?就像添加'/'
使得只有“Home”路由才能工作一样?