在前端使用 fetch 从 express.js 服务器获取响应
Posted
技术标签:
【中文标题】在前端使用 fetch 从 express.js 服务器获取响应【英文标题】:Get response from express.js server using fetch on frontend 【发布时间】:2022-01-19 06:15:45 【问题描述】:我正在学习 javascript 和 express。我已经制作了可以正常工作的后端应用程序,但我不知道如何从浏览器发送请求并从服务器接收响应。 这是我尝试过的一个简单示例:
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 平台上。当我从浏览器转到 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.
我在 *** 和其他网站上看到了其他问题,但不明白如何解决这个 cors 错误。
感谢您的宝贵时间。对不起,如果我在这篇文章中犯了错误。
【问题讨论】:
这能回答你的问题吗? How to enable cors nodejs with express? 【参考方案1】:您需要在您的应用中使用cors
。由于域不同,因此可以从前端应用程序访问它。
const cors = require('cors');
这允许您允许任何前端域
app.use(cors(
origin: '*'
));
这让你允许某些人
app.use(cors(
origin: ['https://siteA.com', 'https://siteB.com']
));
【讨论】:
我试过了。这解决了我的问题!【参考方案2】:当您在glitch.com
上托管您的应用程序时,您需要允许访问域,即哪个域可以访问您的后端。完成此操作后,您将能够从 API 接收数据。
您也可以暂时添加chrome cors插件并启用它。启用后,重新加载网页即可看到响应。
另一种测试或从 API 获取数据的方式,您可以使用PostMan,或者如果使用 Visual Studio 代码,您可以使用来自市场的迅雷客户端。
如果控制台中有设置,我建议您将 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 文档,还有glitch cors issue. 的另一个链接
【讨论】:
我在第 7 行遇到了问题。我尝试了这个解决方案,但是当我从浏览器发送请求时原点是null
,当我从同一服务器发送请求时原点是 undefined
。我阅读了 cors 文档并将|| !origin
添加到检查源是否被列入白名单的条件中,这解决了从同一服务器发送的请求的问题。为什么从浏览器发送的请求总是有null
来源?以上是关于在前端使用 fetch 从 express.js 服务器获取响应的主要内容,如果未能解决你的问题,请参考以下文章
javascript 在Express.JS中的Node.JS中使用Fetch API
服务器未将 JSON 从 Express 返回到 React(代理)