获取和获取请求URL
获取和获取请求URL
提问于 2022-07-20 19:45:31
我试图通过提取(客户端)和获取(服务器)请求获取信息，以便与客户端一起从服务器获取数据并打印出来。由于某些原因，我无法得到我想要的信息，我认为这与我输入的网址有关，我能得到一个解释，或者我应该输入的网址的一个例子吗？
我将输入我的代码作为示例：
客户：
//bitcoin page: url - 'http://localhost:3000/bitcoin'
//NOTE: the proxy is: 'http://localhost:3001'
import React from "react";
import { Link } from "react-router-dom";
function BitCoin() {
const [data, setData] = React.useState(null);
console.log("entered bitcoin page");
React.useEffect(() => {
fetch("NOT SURE WHAT TO WRITE HERE")
.then((res) => res.json())
.then((data) => setData(data.message));
}, []);
return (
<div style={{textAlign:"center", fontFamily:"Comic Sans MC", fontSize:"100"}}>
THIS IS THE BitCoin PAGE
<nav>
<Link to="/"> Home </Link>
</nav>
<nav>
<Link to="/coins"> Coins </Link>
</nav>
<p>{!data ? "Loading..." : data}</p>
</div>
)
}
export default BitCoin;服务器：
//index.js: url - 'http://localhost:3001'
const express = require("express");
const PORT = process.env.PORT || 3001;
const app = express();
app.get('NOT SURE WHAT TO WRITE HERE', (req, res) => {
console.log("entered bitcoin query!");
let msg = "";
//some functions to get the msg I'm looking for (not relevant)
res.json({ message: msg });
});
app.listen(PORT, () => {
console.log(`Server listening on ${PORT}`);
});正如您所看到的，输入get请求时有一个日志，但是控制台没有记录它，我猜客户机和服务器没有通信，这就是问题所在。
谢谢你<3
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-07-20 20:05:57
了解技术栈的一般体系结构是很重要的：
- 您可以在
http://localhost:3000下运行React前端。这只是通过您计算机上的开发服务器为React应用程序提供服务。 - 此外，您有一个NodeJS应用程序(使用快递)在
http://localhost:3001上运行。值得注意的是，它运行在与React应用程序不同的端口下。
在您的快速代码中，您将定义一个url，该url是React前端可以调用的，以获取数据。所以我们叫它/coin-message吧
app.get('/coin-message', (req, res) => {现在，在React应用程序中，您可以向这个url发出ajax请求：
fetch("http://localhost:3001/coin-message")请注意，您需要在fetch()中包含完整的URL和端口--这是因为Node应用程序运行在不同的端口下。
重要
因为您希望向一个具有与React应用程序不同端口的URL发出ajax请求，所以您将遇到一个同一原产地政策问题。这是浏览器为防止web应用程序漏洞而激活的一种安全措施。要解决这个问题，您可以使用一个用于速递的CORS中间件，如这一个。
Stack Overflow用户
发布于 2022-07-20 19:53:41
服务器：
app.get('/bitcoin', ...)客户：
fetch('http://localhost:3001/bitcoin')页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73057365
复制相关文章
相似问题
腾讯云开发者
