1. PmTemple首页
  2. 前端大牛

前后端分离-网络解决方案

在node的环境下
1.安装依赖
npm install
npm install express
npm install http-proxy-middleware
2.创建一个配置文件aa.config.js文件在根目录下,将下面的代码放入该文件内 (该文件无需特殊引用,只要执行第三步和第四步就好了)
var express = require(‘express’);
var proxy = require(‘http-proxy-middleware’);
var app = express();
app.use(‘/fos’, proxy({ //fos是自己写的文件路劲,无特殊固定
target: ‘http://127.0.0.1:8003’, //网关ip地址,固定
changeOrigin: true,
pathRewrite: {
‘^/fos’ : ‘/’
}
}));
app.use(‘/api’, proxy({
target: ‘http://10.20.8.93:9092’, //后端接口的ip地址
changeOrigin: true,
pathRewrite: {
‘^/api’ : ‘/’
}
}));
app.listen(9090); //前端配置的端口 随意不是固定(保证不要重复)
3.启动转发代理服务
npm run server
4.项目运行
npm run start
注:步骤3和4操作如图:
前后端分离-网络解决方案
前后端分离-网络解决方案
5.访问路劲:
http://127.0.0.1:9090/fos/html/login
方法二:
实现跨域问题解决方案:(将两个不同域名放入一个域名下)
环境准备
       nodejs
       npm
安装代理模块
      $ npm install redbird –save-dev
$ npm init
添加本地host解析配置
    修改hosts,路径如下:
    C:WindowsSystem32driversetc
前后端分离-网络解决方案
添加以下内容:
127.0.0.1    app-a.ikunchi.com
127.0.0.1    app-b.ikunchi.com
表示将app-a.ikunchi.com、app-b.ikunchi.com映射到127.0.0.1
网关规则配置
     创建proxy.js文件, 内容如下:
var proxy = require(‘redbird’)({port: 9090});
proxy.register(“app-a.ikunchi.com”, “http://127.0.0.1:8001″);
proxy.register(“app-b.ikunchi.com”, “http://10.4.5.16:8002″);
运行:node proxy.js
启本地服务:http-server ./ -p 8001

前后端分离-网络解决方案
访问
   http://app-a.ikunchi.com:9090 即访问本地8001端口。
   http://app-b.ikunchi.com:9090 即访问远端10.4.5.16的8002端口。
前后端分离-网络解决方案
前后端分离-网络解决方案

原创文章,作者:余 倩倩,如若转载,请注明出处:https://www.pmtemple.com/flyingfish/1198/

发表评论

电子邮件地址不会被公开。 必填项已用*标注