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)


相关推荐

  • 浅析Python优势所在

    浅析Python优势所在浅析Python优势所在 Python优势的最大有点就是比其他语言更简单易学,功能强大的解释型编程语言,它有简洁明了的语法,高效率的高层数据结构,能够简单而有效地实现面向对象编程,欢迎大家学习参考。如果你仅仅认为用Python优势只能写写“HelloWorld”,那你就大错特错了。Python可以被应用到网络开发、GUI开发、图形开发、Web开发、游戏开发、手机

  • javascript 如何添加元素

    javascript 如何添加元素//利用concatfunctionprepend(arr,item){return[item].concat(arr);}//使用push.applyfunctionprepend(arr,item){varnewArr=[item];[].push.apply(newArr,arr);returnnewArr;}//利用slice+unshift/splicefunctionprepend(arr,item){v.

  • platform_driver_register调用probe

    platform_driver_register调用probekernel_init中do_basic_setup()->driver_init()->platform_bus_init()->…初始化platformbus(虚拟总线)设备向内核注册的时候platform_device_register()->platform_device_add()->…内核把设备挂在虚拟的platformbus下驱动注册的时候platform_dri

  • STMS中QAS->PRD通信不畅[通俗易懂]

    STMS中QAS->PRD通信不畅[通俗易懂]现象:DEV->QAS->PRD的传输域配置中,DEV->QAS正常,PRD也可以检测到DEV释放的请求,但是就是无法将请求内容添加(闪电标识)至PRDbuffer。将请求文件copy至PRD的trans目录下,上载成功,导入成功。1.怀疑,PRD的\usr\sap的权限,确认也有写入权限2.怀疑QAS和PRD的通信,可以ping通3.STMS传

  • C语言qsort函数用法

    C语言qsort函数用法qsort函数简介   排序方法有很多种:选择排序,冒泡排序,归并排序,快速排序等。看名字都知道快速排序是目前公认的一种比较好的排序算法。因为他速度很快,所以系统也在库里实现这个算法,便于我们的使用。这就是qsort函数(全称quicksort)。它是ANSIC标准中提供的,其声明在stdlib.h文件中,是根据二分法写的,其时间复杂度为n*log(n)  功能:

  • 函数调用堆栈 涉及汇编(转)

    函数调用堆栈 涉及汇编(转)

发表回复

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

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