javascript - 类型错误 : NetworkError when attempting to fetch resource

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 一起使用

我用console的时候说问题在里面

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 错误，那是因为前端和后端托管在不同的域或端口下，如果在本地主机上，让我们进一步解释一下。

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

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

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

还有这个 NPM Package让 nodejs 帮助你处理 CORS