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 ...
随机推荐
- [转]Centos安装zeromq和jzmq
Required packages: autoconf automake libtool gcc gcc-g++ make libuuid-dev git java-1.6.0-openjdk-dev ...
- lnmp平台菜鸟入门级笔记
LNMP平台搭建 Mysql安装 MySQL安装 回复收藏 分享 1 下载MySQL数据库l到/usr/local/src/[root@xin tmp]# cd ...
- c#操作access,update语句不执行的解决办法
update access数据库时,使用了参数化的方式,结果不报错,但是数据也没有更新.后来发现access使用参数化时,参数位置必须和赋值顺序相同才行,否则更新时就会出现数据无法更新但是也不报错的怪 ...
- Eclipse插件安装方式及使用说明
拷贝安装方式 1.通过ECLIPSE_HOME\plugins安装 在eclipse的主目录ECLIPSE_HOME, 比如在我的机器上安装的目录是:ECLIPSE_HOME有一个plugins的目录 ...
- WAMP虚拟目录的设置
1.打开Apache的配置文件httpd.conf,并去掉#Include conf/extra/httpd-vhosts.conf前面的#!! 2.打开Apache的apache/conf/extr ...
- SQLite常用语句
// 错误存储路径 - (NSString *)dataFilePath{ NSString *dbPath = [NSSearchPathForDirectoriesInDomains(NSLibr ...
- python——argsort函数
numpy中argsort函数用法,有需要的朋友可以参考下. 在Python中使用help帮助 >>> import numpy >>> help(numpy.ar ...
- 【解决】putty使用从AWS下载的private key登录失败
在AWS启动一个实例时如果创建并下载了一个KeyPair的私钥(*.pem),则可以此私钥作为Credentials通过putty远程登录到这个实例系统.但在实际操作中,用putty登录时会提示如下错 ...
- 黑马程序员_ Objective-c 之Foundation笔记(一)
结构体 NSRange: 用来表示范围 创建 NSRange r1 = {2, 4} NSRange r2 = {.location = 2, .length = 4} NSRange r3 = N ...
- spring+ibatis整合
一.pom.xml: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww ...