如果我在前端使用vanilla js，在后端使用node js，如何在同一端口上运行前端和后端？

tjjdgumg 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(465)

如果我在前端使用vanilla js，在后端使用node js，如何在rest API的同一端口上运行前端和后端？我发现了很多关于如何为react做这件事的东西，但没有关于vanilla js的。有可能吗？
有关更多信息，您还可以阅读本文：-https://medium.com/@Ryanchenkie40935/react-authentication-how-to-store-jwt-in-a-cookie-346519310e81

JavaScript node.js Html express HttpServer

来源：https://stackoverflow.com/questions/68329202/how-to-run-frontend-and-backend-on-same-port-if-i-am-using-vanilla-js-on-front

1条答案

按热度按时间

tzcvj98z1#

nodejs应用程序可以为html页面和静态资产（如javascript和css代码）提供服务。
注意：对于下面的代理检查
您可以使用express通过使用 express.static .
下面是一个工作示例
创建以下目录结构

+-- public
|   +-- scripts
|   |  +-- index.js
|   +-- styles
|   |  +-- index.css
+-- +-- views
|   |  +-- index.html
+-- index.js
+-- package.json

添加您的代码
index.js

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

const app = express();

// add relevant request parsers
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.text());

app.set("views", path.join(__dirname, "/public/views"));
// set jade as view engine. 
app.set("view engine", "jade");

// public route will be used to server the static content
app.use("/public", express.static("public"));

// write your APIs here

app.get("/user", (req, res) => {
    res.json({
        firstname: "john",
        lastname: "doe"
    });
});

const port = 7000;

app.listen(port, () => {
    console.log(`Server is running on port: ${port}`);
});

public/views/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/public/styles/index.css" type="text/css" >
    <script src="/public/scripts/index.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

public/styles/index.css

body {
    color: white;
    background-color: black;
}

public/scripts/index.js

window.onload = () => {
    alert("script loaded");
}

跑 npm init 创建package.json文件的步骤
跑 npm install express --save 使用启动服务器 node index.js 导航到 http://localhost:7000/public/views/ 获取html页面的步骤
导航到 http://localhost:7000/user 获取json响应
现在您的服务器已准备好接收请求。您可以在公用文件夹中添加客户端代码，在公用文件夹外添加服务器端代码。
您现在有一个端口来接收所有前端和后端请求。
op关于使用代理的评论后更新
我们还可以使用一个名为http代理中间件的包设置从一个nodejs服务器到另一个服务器的代理
下面是代理服务器的基本设置

const express = require("express");
const { createProxyMiddleware } = require("http-proxy-middleware");

const app = express();

const proxyUrl = "http://localhost:3000";
const proxy = createProxyMiddleware({
    target: proxyUrl,
});

app.use('/api', createProxyMiddleware(proxy));

const port = 7000;

app.listen(port, () => {
    console.log(`Server is running on port: ${port}`);
    console.log(`Proyx is set to ${proxyUrl}`);
});

赞(0）回复(0）举报 2021-09-23

我来回答

如果我在前端使用vanilla js，在后端使用node js，如何在同一端口上运行前端和后端？

1条答案

相关问题

热门标签

最新问答