TypeError:尝试提取资源时出现网络错误

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