时间戳

首页 > 解决方案 > 类型错误：尝试获取资源时出现网络错误

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

问题描述

我得到这个问题：

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

当我使用控制台时，它说问题出在它里面

标签： javascriptnode.jswebpack

解决方案

正如我所看到的这个错误

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 代表 Cross Origin Resource Sharing 是一种仅适用于 Javascript（浏览器）的安全策略，它阻止网站使用 AJAX 访问其他网站，除非它们使用标头明确批准。

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

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

还有这个用于 nodejs 的NPM 包来帮助你处理 CORS

推荐阅读