Ngnix反向代理react-router配置问题解决方法
项目以react router实现,用ngnix做反向代理的时候出现404找不到页面,有两种解决方法。
第一种 将<Route path="*" component={NotFound} />对应的component改为<IndexRoute>对应的component,如下:
const Routes = ({ history }) =>
<Router history={history}>
<Route path="/" component={Index}>
<IndexRoute component={DefaultPage}/>
<Route path="/lc" component={DefaultPage} />
<Route path="/Icon" component={Icon} />
<Route path="/ECharts" component={ECharts} />
<Route path="/page1" component={Page1} />
<Route path="/page3" component={Index} />
<Route path="/ruleJson" component={ruleJson} />
<Route path="/rules" component={rules} />
<Route path="/dataSource" component={DataSource}/>
<Route path="/viewTable" component={ViewTable}/>
<Route path="/sourceMatch" component={SourceMatch}/>
<Route path="/addMatchRules" component={AddMatchRules}/>
<Route path="seeMatchRules" component={SeeMatchRules}/>
<Route path="projectSourceUse" component={ProjectSourceUse}/>
<Route path="kafkaConfig" component={KafkaConfig}/>
<Route path="dataLocate" component={DataLocate}/>
<Route path="configurationEnvironment" component={ConfigurationEnvironment}/>
<Route path="mainframeInfo" component={MainframeInfo}/>
<Route path="resInfo" component={ResInfo}/>
<Route path="askForRes" component={AskForRes}/>
<Route path="releaseTask" component={ReleaseTask}/>
<Route path="taskList" component={TaskList}/>
<Route path="taskList" component={TaskList}/>
<Route path="taskList" component={TaskList}/>
<Route path="*" component={DefaultPage} />
</Route>
</Router>
此时 Ngnix服务端配置如下
server {
listen 80;
server_name localhost;
proxy_redirect http://localhost:3083/ /;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://10.248.26.202;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /pt/ {
proxy_pass http://10.248.26.202:3083;
rewrite "^/pt(.*)$" $1 break;
}
location /help/ {
proxy_pass http://10.248.26.202/help;
}
location ~^/lc/ {
proxy_pass http://localhost:8080;
rewrite "^/lc(.*)$" $1 break;
}
}
此时代理成功 但是字体加载不到 根据404请求的地址所以添加一个字体的规则
location ^~/fonts/{
rewrite "^(.*)/fonts(.*)$" $1/lc/fonts$2;
}
第二种方法
在路由中添加一条与uri对应的路径指向首页 如下
const Routes = ({ history }) =>
<Router history={history}>
<Route path="/" component={Index}>
<IndexRoute component={DefaultPage}/>
<Route path="/lc" component={DefaultPage} />
<Route path="/Icon" component={Icon} />
<Route path="/ECharts" component={ECharts} />
<Route path="/page1" component={Page1} />
<Route path="/page3" component={Index} />
<Route path="/ruleJson" component={ruleJson} />
<Route path="/rules" component={rules} />
<Route path="/dataSource" component={DataSource}/>
<Route path="/viewTable" component={ViewTable}/>
<Route path="/sourceMatch" component={SourceMatch}/>
<Route path="/addMatchRules" component={AddMatchRules}/>
<Route path="seeMatchRules" component={SeeMatchRules}/>
<Route path="projectSourceUse" component={ProjectSourceUse}/>
<Route path="kafkaConfig" component={KafkaConfig}/>
<Route path="dataLocate" component={DataLocate}/>
<Route path="configurationEnvironment" component={ConfigurationEnvironment}/>
<Route path="mainframeInfo" component={MainframeInfo}/>
<Route path="resInfo" component={ResInfo}/>
<Route path="askForRes" component={AskForRes}/>
<Route path="releaseTask" component={ReleaseTask}/>
<Route path="taskList" component={TaskList}/>
<Route path="taskList" component={TaskList}/>
<Route path="taskList" component={TaskList}/>
<Route path="*" component={DefaultPage} />
</Route>
</Router>
此时ngnix服务器端的配置如下
server {
listen 80;
server_name localhost;
proxy_redirect http://localhost:3083/ /;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://10.248.26.202;
}
location /pt/ {
proxy_pass http://10.248.26.202:3083;
rewrite "^/pt(.*)$" $1 break;
}
location /help/ {
proxy_pass http://10.248.26.202/help;
}
location ~^/lc/ {
proxy_pass http://localhost:8080;
rewrite "^/lc(.*)$" $1 break;
}
Ngnix反向代理react-router配置问题解决方法的更多相关文章
- [跨域]跨域解决方法之Ngnix反向代理
跨域原理:http://www.cnblogs.com/Alear/p/8758331.html 介绍Ngnix之前,我么先来介绍下代理是什么~ 代理相当于中间人,中介的概念 代理分为正向代理和反向代 ...
- 正向代理 forward proxy、反向代理 reverse proxy、透明代理 transparent proxy nginx反向代理原理和配置讲解 防止外部客户机获取内部内容服务器的重定向 URL 缓存命中
[大型网站技术实践]初级篇:借助Nginx搭建反向代理服务器 - Edison Chou - 博客园http://www.cnblogs.com/edisonchou/p/4126742.html 图 ...
- Nginx反向代理负载均衡配置
1.反向代理概述 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求 ...
- Nginx反向代理讲解和配置
首先来介绍下Nginx的反向代理.代理服务器一般分为正向代理(通常直接称为代理服务器)和反向代理. 画个图我们就好理解了. 正向代理:可以想象成是路由器,我们要通过它来上网的那种.(可以说是客户端的代 ...
- ngnix 反向代理
1 课程目标 掌握nginx+tomcat反向代理的使用方法. 掌握nginx作为负载均衡器的使用方法. 掌握nginx实现web缓存方法. 2 nginx介绍 2.1 ...
- Nginx实战之反向代理WebSocket的配置实例
http://www.jb51.net/article/112183.htm 最近在工作中遇到一个需求,需要使用 nginx 反向代理websocket,经过查找一番资料,目前已经测试通过,所以这篇文 ...
- Nginx反向代理的基本配置
(1)proxy_pass 语法:proxy_pass URL; 配置块:location.if 此配置项将当前请求反向代理到URL参数指定的服务器上,URL可以是主机名或IP地址加端口的形式,例如: ...
- Linux 下 Nginx 反向代理 负载均衡配置
转载请注明出处:http://blog.csdn.net/smartbetter/article/details/52036350 上一篇分享了 Nginx + JDK + Tomcat + MySQ ...
- nginx反向代理做cache配置
前序:请耐性子看完,前面的这个配置可以达到按后缀名进行缓存,但无法被purge.后面的配置可以被purge.具体实施方案按个人情况而定. 需要第三方的ngx_cache_purge模块:wget ht ...
随机推荐
- Head First 设计模式之观察者模式(Observer Pattern)
前言: 这一节开始学习观察者模式,开始讲之前会先像第一节那样通过一个应用场景来引入该模式.具体场景为:气象站提供了一个WeatherData对象,该对象可以追踪获取天气的温度.气压.湿度信息,Weat ...
- 改写《python基础教程》中的一个例子
一.前言 初学python,看<python基础教程>,第20章实现了将文本转化成html的功能.由于本人之前有DIY一个markdown转html的算法,所以对这个例子有兴趣.可仔细一看 ...
- 支付宝支付参数MD5签名
protected String signMD5(List<String> paramNames, String key, String charset) throws Unsupport ...
- Camel运行原理分析
Camel运行原理分析 以一个简单的例子说明一下camel的运行原理,例子本身很简单,目的就是将一个目录下的文件搬运到另一个文件夹,处理器只是将文件(限于文本文件)的内容打印到控制台,首先代码如下: ...
- 简单的聊天室代码php+swoole
php swoole+websocket 客户端代码 <!DOCTYPE html> <html> <head> <title></title&g ...
- Sublime Text 2/3安装使用及常用插件
一.介绍 Sublime Text 是一款较新的编辑器,它轻量.简洁.高效,良好的扩展性以及跨平台等特性,使得越来越多的开发人员喜爱.它是一款收费的商业软件,但可以免费无限制无限期的试用,只会偶尔提醒 ...
- vc++>>Connection using old (pre-4.1.1) authentication protocol refused (client option 'secure_auth' enable
用VC来连接远程MYSQL时,出现如标题一样的错误,网上搜索了此错误产生的原因,最后自己找到了解决办法. 此错误产生的原因: 异常原因在于服务器端的密码管理协议陈旧,使用的是旧有的用户密码格式存储:但 ...
- [转载]给IT人员支招:如何跟业务部门谈需求分析?
一提跟业务人员做“需求分析”,许多IT人员立刻就头大了,要么不在同一个“频道”讲话,要么“变来变去,定不下来”.如何跟业务部门谈需求分析呢,我们带着这个问题,与聚冠因尚的咨询顾问杨春波展开了讨论. 1 ...
- python 类变量和实例变量
super(cls, inst) 获得的是 cls 在 inst 的 MRO 列表中的下一个类. 实例的属性存储在实例的__dict__中,类属性和方法存储在类的__dict__中.查找属性时,先检 ...
- ctype.h库函数----字符操作函数
在c++中使用时: #include <cctype> 字符判断函数 1.isalnum函数--判断是否是英文字母或数字字符,如果是,则返回非0值,如果不是,则返回0. 函数参数 :可以 ...