nodejs 代理服务器_nodejs部署前端项目

nodejs 代理服务器_nodejs部署前端项目代理服务器的原理案例安装express、http-proxy-middlewareapp.js文件nodeapp.jsvarexpress=require(‘express’);varapp=express();app.use(express.static(‘./public’));app.listen(3000);在public文件夹下建立a.html<!DOCTYPEhtml><htmllang=”en”><hea

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

代理服务器的原理

在这里插入图片描述

案例

  • 安装 expresshttp-proxy-middleware
  • app.js 文件 node app.js
    var express = require('express');
    var app = express();
    app.use(express.static('./public'));
    app.listen(3000);
    

    Jetbrains全家桶1年46,售后保障稳定

  • 在 public 文件夹下建立 a.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">    <title>Document</title></head><body>    <!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">    <title>Document</title></head><body>    <button onclick="Click()">点击发送请求</button>    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>    <script>        function Click() {                   axios('http://localhost:5000/b')                 .then(function(res) {                           console.log(res);                 });        }    </script></body></html></body></html>
  • 搭建接口服务器,接口服务器端口号 5000
    node interface.js
    var express = require('express');var app = express();app.get("/", (req, res) => {          res.send("123");});app.get("/api/a", (req, res) => {          res.send("a");});app.get("/b", (req, res) => {          console.log(req.headers);    res.send("b");});app.listen(5000);
  • 访问http://localhost:3000/a.html
    在这里插入图片描述

搭建代理服务器解决跨域问题

  • 更改 app.js
    var express = require('express');var proxy = require('http-proxy-middleware');var app = express();app.use(express.static('./public'));app.use('/api', proxy.createProxyMiddleware({          target: 'http://localhost:5000',    changeOrigin: false,    pathRewrite: {              "^/api": ""    }}));app.listen(3000);
  • 更改 a.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">    <title>Document</title></head><body>    <!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">    <title>Document</title></head><body>    <button onclick="Click()">点击发送请求</button>    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>    <script> function Click() {         // axios('http://localhost:5000/b') // .then(function(res) {         // console.log(res); // }); axios('/api/b') .then(function(res) {         console.log(res); }); } </script></body></html></body></html>
  • 访问 http://localhost:3000/a.html
    在这里插入图片描述

原理解释

  • 将 a.html 请求地址改为 /api/b,那么发送请求的时候会自动补上主机和端口号http://localhost:3000
    在这里插入图片描述
    在这里插入图片描述
  • 所以请求发送到了3000端口
  • 参数含义
    target: 转发到的目标地址

    changeOrigin: 是否更改host。默认为false,不重写
    true
    在这里插入图片描述
    false
    在这里插入图片描述


    pathRewrite:路径重写(在这里是去掉’api’)
    在这里插入图片描述

  • 最终请求被转发到了 http://localhost:5000/b
    app.get("/b", (req, res) => { 
    
    console.log(req.headers);
    res.send("b");
    });
    
  • 整个过程就像这样
    在这里插入图片描述
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/219598.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • docker-compose 集群_hadoop完全分布式搭建步骤

    docker-compose 集群_hadoop完全分布式搭建步骤前言实际工作中我们部署一个应用,一般不仅仅只有一个容器,可能会涉及到多个,比如用到数据库,中间件MQ,web前端和后端服务,等多个容器。我们如果一个个去启动应用,当项目非常多时,就很难记住了,所有

  • 盒子模型(Box Model)「建议收藏」

    盒子模型(Box Model)「建议收藏」所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。盒子里面的文字和图片等元素是内容区域盒子的厚度我们成为盒子的边框盒子内容与边框的距离是内边距(类似单元格的cellpadding)盒子与盒子之间的距离是外边距(类似单元格的cells…

    2022年10月30日
  • 删除数组中的指定元素_js判断数组是否包含某个元素

    删除数组中的指定元素_js判断数组是否包含某个元素js数组指定位置删除和添加元素

  • Ant是什么?「建议收藏」

    Ant是什么?「建议收藏」Ant是Java的生成工具,是Apache的核心项目;Ant类似于Unix中的Make工具,都是用来编译、生成;Ant是跨平台的,而Make不能;Ant的主要目的就是把你想做的事情自动化,不用你手动一步一步做,因为里面内置了javac、java、创建目录、复制文件等功能,所以可以直接点击Ant文件,即可编译生成你的项目。……

  • Java 验证码识别(Tess4J初体验)「建议收藏」

    Java 验证码识别(Tess4J初体验)「建议收藏」Tess4J官方描述:AJavaJNAwrapperforTesseractOCRAPI.demo下载1.先去官网下载:http://tess4j.sourceforge.net/2.将下载的文件解压后把下面几个文件夹(图片中选中的)复制到新建的项目中3.将lib下的jar包加到buildpath中。注意:lib里面除了jar包还有别的。4.根据官网的样例在刚建的项目中使用一下:…

  • Navicat15 注册激活码【最新永久激活】「建议收藏」

    (Navicat15 注册激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号