欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 房产 > 建筑 > umi build 打包后production工程发布到xampp或node服务, 代理proxy的设置流程;

umi build 打包后production工程发布到xampp或node服务, 代理proxy的设置流程;

2024/10/26 13:20:10 来源:https://blog.csdn.net/qq_32563571/article/details/142876673  浏览:    关键词:umi build 打包后production工程发布到xampp或node服务, 代理proxy的设置流程;

umi发布打包会有代理问题,官方没给出具体操作步骤;下面介绍两种运行环境proxy的设置方法;

核心问题,为什么本地dev环境可以代理成功,而放在服务器或xampp上,或nginx 上就不能正常访问其它端口或链接;

本质问题是浏览器的同源策略;

1:dev环境用本地的proxy代理解决了同源问题;umi官方api有介绍;

2:我们生成环境需要解决的同源问题;

这里准确来讲应该属于运维来处理此问题;但是我们也得知道如何处理;

1:用node启的服务; 

/*** Created by xj on 2019/3/24.*/
const Koa = require("koa");
const bodyParser = require("koa-bodyparser");
const Nunjucks = require("nunjucks");
const views = require("koa-views");
const debug = require("debug")("koa-weapp-demo");
const config = require("./config");
// const router = require("./router");
const Router = require("koa-router")();
const path = require("path");
const moment = require("moment");
const app = new Koa();
const { createProxyMiddleware } = require("http-proxy-middleware");
const Koa2Connect = require("koa2-connect");
//打印
const logger = require("koa-logger");
app.use(logger());
const __static = require("koa-static");
// parse request body:
app.use(bodyParser());
app.use((ctx, next) => {const start = Date.now();return next().then(async () => {const ms = Date.now() - start;if (ctx.response.status == 200 || ctx.response.status == 302) {return;} else {ctx.redirect("/404");}console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);});
});const exampleProxy = createProxyMiddleware({pathFilter: "/api",// 匹配以/api开头的路径pathRewrite: { "/api": "" },// 把/api去除掉target: "http://localhost:3000/",// target host with the same base pathchangeOrigin: true,// needed for virtual hosted sites
});app.use(__static(__dirname + "/public"));
app// .use(router.routes())// .use(router.allowedMethods()).use(Koa2Connect(exampleProxy)).listen(config.port, () => {debug(`listening on port ${config.port}`),console.log(`listening on port ${config.port}`);});

根据文件下载需要的依赖,不用的可以不下,这是个以前项目复制出来的模板,没删,需要啥用啥;

这里需要代理prox 相关的,static ,公共文件相关的,koa2-connect处理express 的prox相关的(类似把express转义成koa可用的包);

简单来说就是把umi打包好的静态文件放public里面;直接跑;代理的配置看一眼都懂,在代码配置里;

2:xampp

静态文件放hotdocs里;

修改apache配置文件httpd.conf

 

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_ajp_module modules/mod_proxy_ajp.so
#LoadModule proxy_balancer_module modules/mod_proxy_balancer.so
LoadModule proxy_connect_module modules/mod_proxy_connect.so
LoadModule proxy_express_module modules/mod_proxy_express.so
LoadModule proxy_fcgi_module modules/mod_proxy_fcgi.so
LoadModule proxy_ftp_module modules/mod_proxy_ftp.so
#LoadModule proxy_hcheck_module modules/mod_proxy_hcheck.so
LoadModule proxy_html_module modules/mod_proxy_html.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule proxy_http2_module modules/mod_proxy_http2.so
LoadModule proxy_scgi_module modules/mod_proxy_scgi.so
LoadModule proxy_uwsgi_module modules/mod_proxy_uwsgi.so
LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so

照着设置#就行,该去的去该留的留;

然后是下面这个proxy文件

 

重启apache;

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com