类型错误：尝试获取资源时出现网络错误

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

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

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

您可以阅读本文以深入了解 CORS 或者您可以查看此链接以了解如何解决您面临的问题

Nodejs 的NPM 包可以帮助您处理 CORS