axios中的GET/POST不起作用，但fetch起作用

Question

我在Heroku上托管了一个REST API。它由Express、NodeJS和MongoDB(mongoose作为orm和MongoDB Atlas(组成。我正在使用MERN堆栈。这里是初学者😅

API链接：

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

API与Postman和VS代码的API插件配合得很好。它在本地主机上也能很好地工作。

但当我尝试使用axios获取/POST时，它会给出：

错误："网络错误"；

但是fetch()工作得很好。邮差也是。

此外，控制台中的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在本地主机上工作，但部署后就不能与axios一起工作了。

我已设置cors origin: 'http://localhost:3000/'我检查了fetch和axios GET请求的头部。它们实际上是一样的。

请求标头具有Access-Control-Allow-Origin http://localhost:3000/

BTW我的前端托管在localhost:3000上

那么，为什么会发生这种情况呢？为什么axios不工作，但提取是。

编辑：这是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))

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

Answer 1

我终于想通了！！事实上，这是我在cors中设置的原点链接。我将原点设置为http://localhost:3000/。但有趣的是，客户端来源(也是http://localhost:3000/(与服务器中的来源不匹配。但是，当我将服务器cors原点更改为http://localhost:3000时，从原点删除'/'解决了问题。我不知道为什么它不起作用，但我很高兴它起作用了。现在我需要解释为什么它有效。这与特定路线有关吗？就像添加'/'使得只有"Home"路由才能工作一样？