尝试获取资源时出现TypeError：NetworkError

Question

我得到了这个问题：

Response { type: "cors", url: "http://localhost:3000/api/marks", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers, body: ReadableStream, bodyUsed: true }
MarkService.js:5
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/api/marks. (Reason: CORS request did not succeed).

这是它所指的地方

class MarkService {
  constructor() {
    this.URI = `localhost:3000/api/marks`;
  }

  async getMarks() {
    const response = await fetch(this.URI);
    const marks = await response.json();
    return marks;
  }
}
export default MarkService;

我正在尝试在后端创建一个带有express的应用程序，并为前端创建Webpack。我在后端有一个Rest API，我不能在前端使用它。

我正在使用Ubuntu和Mozilla Firefox 66.0.2以及Nodejs 11.13.0

当我使用控制台时，它说问题就在其中

Answer 1

正如我可以看到这个错误

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/api/marks. (Reason: CORS request did not succeed)

它说发生了CORS错误，这是因为如果在localhost上，前端和后端托管在不同的域或端口下，让我们进一步解释这个问题。

代表跨源资源共享的CORS是一种安全策略，仅适用于阻止网站使用AJAX访问其他网站的Javascript（浏览器），除非使用标头明确批准。

要解决此问题，您需要在服务器端的响应中传递某些标头，以批准请求域，标头和方法的CORS

你可以阅读这个article深入了解CORS或者你可以检查这个link知道如何解决你面临的问题

有这个NPM Package用于nodejs来帮助你使用CORS