在前端使用 fetch 从 express.js 服务器获取响应

Question

我正在学习javascript和表达。我已经制作了可以正常工作的后端应用程序，但我不知道如何从浏览器发送请求并从服务器接收响应。这是我尝试过的一个简单示例：

server.js:

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Listening on port 3000!")
})

app.get("/", (req, res) => {
  res.send("Hello");
})

服务器位于我浏览器的 glitch.com platform. When I go to the https://expressjs-test.glitch.me/ 项目上，我在 HTML 文档中看到 Hello 消息（它工作正常）。

Javascript 从我的浏览器执行的文件:

let req = fetch("https://expressjs-test.glitch.me/");
req.then(response => console.log(response));

我尝试这样做时遇到的问题是:

Access to fetch at 'https://expressjs-test.glitch.me/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我在 Whosebug 和其他网站上看到过其他问题，但不明白如何解决这个 cors 错误。

感谢您的宝贵时间。对不起，如果我在 post.

中犯了错误

Answer 1

当您在 glitch.com 上托管您的应用程序时，您需要允许访问域，即哪些域可以访问您的后端。完成后，您将能够从 API.

接收数据

也可以暂时添加chromecors插件并启用。启用后，重新加载网页即可看到响应。

从 API 测试或获取数据的另一种方法，您可以使用 PostMan 或者如果使用 Visual Studio 代码，您可以从市场上使用 thunder 客户端。

如果控制台中有设置，我建议您将 cors 添加到您的 Node.js 服务器。

const express = require("express"), 
      app = express(),  
      cors = require("cors"), // importing the `cors` package

const whitelist = ['http://example1.com', 'http://example2.com']
const corsOptions = {
  origin: function (origin, callback) {
    if (whitelist.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  }
}

app.use(cors(corsOptions)) // tells Express to use `cors`, and solves the issue

app.listen(3000, () => {
  console.log("Listening on port 3000!")
})

app.get("/", (req, res) => {
  res.send("Hello");
})

你应该检查 cors documentation here and there is another link for glitch cors issue.

Answer 2

您需要在您的应用中使用 cors。由于域不同，因此可以从前端应用程序访问它。

const cors = require('cors');

这允许您允许任何前端域

app.use(cors({
    origin: '*'
}));

这让您允许某些

app.use(cors({
    origin: ['https://siteA.com', 'https://siteB.com']
}));

在前端使用 fetch 从 express.js 服务器获取响应

Get response from express.js server using fetch on frontend

javascript

fetch

node.js

cors

express