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代表跨源资源共享（Cross Origin Resource Sharing）是仅适用于Javascript（浏览器）的安全策略，该Javascript阻止网站使用AJAX访问其他网站，除非使用标头明确批准了这些网站。

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

您可以阅读article，以获得有关CORS的深入知识或者，您可以选中此link来了解如何解决您面临的问题

nodejs可以使用此NPM Package来帮助您进行CORS

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

1 个答案: