[英]How to connect a frontend application on a different port with a backend?
我将前端应用程序放在 node.js 应用程序的公共文件夹中,并使用以下请求获取表单数据:
try {
await axios.post("/api/v1/contact-form", {
name,
email,
msg,
});
}
我的后端位于端口 5000 中,它通过以下方式处理请求:
app.use("/api/v1/contact-form", submitFormRouter);
它工作完美。 当我的前端应用程序位于 node.js 公用文件夹中时,我正在获取数据。
我的问题是我的前端是否在不同的本地端口上运行,例如,如果我使用“五台服务器”来运行前端应用程序,我如何替换以下路径来发布:
前端:
try {
await axios.post("/api/v1/contact-form", {
name,
email,
msg,
});
}
后端:
app.use("/api/v1/contact-form", submitFormRouter)
我还尝试了使用 React 的代码,在这种情况下,前端在http://localhost:3000/
中运行,node.js 服务器在5000
中运行,代码仍然有效,我正在获取表单数据。 但是,如何使它适用于位于不同端口的前端应用程序(没有反应)?
此外,我希望您能很好地回答以下问题 - 一旦我拥有前端,让我们在 Netlify 上说,而后端在 Heroku 上,路径会是什么?
一旦我在 Netlify 上说前端,而后端在 Heroku 上,路径会是什么?
假设您在 Heroku 上的 Back 有这个网址https://app.herokuapp.com/
和 Netlify 上的 Front https://app.netlify.com/
。 你所要做的就是给你的 Front 你的 Back 的 url,像这样:
try {
await axios.post("https://app.herokuapp.com/api/v1/contact-form", {
name,
email,
msg,
});
}
我的问题是我的前端是否在不同的本地端口上运行,例如,如果我使用“五台服务器”来运行前端应用程序,我该如何...
此时您有两种选择,最简单的一种是使用上面的完整 url。 假设您的 Front 位于端口3000
上,而 Back 位于8080
端口上。 你所要做的就是:
try {
await axios.post("http://localhost:8080/api/v1/contact-form", {
name,
email,
msg,
});
}
第二种是使用proxy
,这实际上取决于您项目的结构和需求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.