Question

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

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

但是当我尝试使用 axios 进行 GET/POST 时，它给出了 Error: "Network Error" 但是 fetch() 工作得很好。邮递员也是。

还有我在控制台中看到 cors 警告：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://mern-deploy-test-adib.herokuapp.com/api/todos. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘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))

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

Answer 1

我终于明白了！！其实这是我在cors中设置的原点链接。我将原点设置为 http://localhost:3000/。但有趣的是客户端源（也是 http://localhost:3000/）与服务器中的源不匹配。但是当我将服务器 cors 源更改为 http://localhost:3000 时，从源中删除 '/' 解决了该问题。我不知道为什么它不起作用，但我很高兴它起作用了。现在我需要解释为什么它有效。跟具体路线有关系吗？就像添加 '/' 一样，只有“家”路线可以工作？

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

1 个答案: