Articles of reactjs

ERR_CONTENT_DECODING_FAILED nginx reactjs node.js

感谢花了2分钟来帮助我。 这是我的问题: 我们目前正在用nginx,reactjs和node.js开发一个网站。几个星期以来,我们有这个特殊的问题,我们不知道它来自哪里: 完全随机我们的网站是closures的,浏览器提示ERR_CONTENT_DECODING_FAILED 有时候没有问题,网站是好的,但10分钟后,它崩溃并显示这个错误。 然后它回来…在一个循环中。 我们在网上看了很多,没有find答案。 请,如果你知道可以帮助我们,请告诉我们。 谢天谢地

使用“createHashHistory”vs“createBrowserHistory”部署的困境

我正在使用“ gulp-connect ”作为开发服务器,我正在尝试实现react路由器1.0.0-rc1。 目前我正在使用“createHashHistory”在URL中添加垃圾,如:?_k = ckuvup,正如文档中所定义的那样。 我没有问题,直到我发送查询string与URL和我的链接看起来像这样的垃圾附加在域名后面,而不是在最后: http://localhost:8080/#/?_k=y754gg/jobs?latitude=27.686784000000003&longitude=85.2690875&query_location=Liverpool, United Kingdom&query=fjdkf 预期的url(如下所示): http://localhost:8080/#/jobs?latitude=27.686784000000003&longitude=85.2690875&query_location=Liverpool, United Kingdom&query=fjdkf/?_k=y754gg 我可以使用“createBrowserHistory”,它有一个很清晰的URL,但问题是:1)服务器configuration。 仅提供的示例显示了如何在Express中执行操作 。 我打算在生产中使用nginx,并在开发中使用gulp-connect。 由于我找不到任何参考如何在这台服务器做我不得不select“createBrowserHistory”。 2)我的后端是在轨道上,如果我通过我的前端在“公共”文件夹中,URL与#应分开客户端和服务器路由。 但我一直在想,必须有一种方法来在nginx中使用createBrowserHistory和一些configuration。 在这个问题上,我的首要任务是在最后加上钥匙的第一部分。 任何参考如何configuration在不同的服务器上完成将不胜感激。

WebSocket连接到'ws://…/socket.io/'失败:在WebSocket握手期间出错:net :: ERR_CONNECTION_RESET

我正在使用nginx和代理到我的应用程序,它使用node.js上的socket.io作为websocket连接。 当通过域访问应用程序时,出现上述错误。 我已经根据https://github.com/socketio/socket.io/issues/1942configuration了nginx,以确保websockets被正确代理到node.js后端。 我的nginxconfiguration如下: server { listen 80; server_name domain.com; location / { proxy_pass http://xxx.xx.xx.xx:8080; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } } 在我的反应客户端中,我以这种方式启动websocket连接: import io from 'socket.io-client'; componentWillMount() { this.socket = io(); this.socket.on('data', (data) => { this.state.output.push(data); this.setState(this.state); }); } 任何build议表示赞赏! 编辑1: 经过更多的调查。 我的服务器设置如下: 可从互联网访问的域名:web-facing.domain.com 可从Intranet访问的域:internal.domain.com 当我从内联网访问应用程序时,它工作正常,但从互联网访问时得到错误。 […]

如何configuration我的Nginx服务器在子文件夹中使用React应用程序?

我正在尝试在我的Nginx服务器上的子文件夹中部署React应用程序。 此React应用的位置结构如下:www.example.com/reactApp。 我试图设置我的当前nginx.conf像这样: server { ..other configs.. location /reactApp { root /var/www; index reactApp/index.html; try_files $uri $uri/ /index.html; } ..other configs.. } 这没有奏效。 我需要改变什么来修复我的子文件夹路由?

react.js应用程序显示404在nginx服务器中找不到

我上传react.js应用程序到服务器。 我正在使用nginx服务器。 应用程序工作正常。 但是当我去其他网页刷新,网站不工作。 它显示404没有find错误。 我该如何解决这个问题。 谢谢。

我如何configurationreact-router与nginx / cherrypy和我目前的reactjs应用程序

我有一个工作的networking应用程序nginx与樱桃在后端和ReactJS为前端服务。 该应用程序增长,所以我想使用react-router来提供快速访问URL的网页。 例如,我希望my.domain.name/user将获得pipe理用户的应用程序中的部分。 我的单个index.html包含这样的js包: <script src="/js/bundle.js"></script> 直到现在我的应用程序开始通过渲染AppMain。 现在,我创build了一个NoMatch类,并将两者都放入了一个react-router,如下所示: ReactDOM.render(( <Router history={browserHistory}> <Route path="/" component={AppMain}> <Route path="*" component={NoMatch}/> </Route> </Router> ), document.getElementById('main-central')); 当试图这个工作很好。 使用http://my.domain.name给了我像以前的应用程序。 但现在尝试http://my.domain.name/whatever应该渲染任何NoMatch正在呈现。 但是,我得到了nginx 404页面。 所以我相信一个nginx端configuration是必要的,但不仅仅是(这就是为什么我把上面的整个故事)。 Nginx的configuration(http部分)如下所示: upstream app_servers { server 127.0.0.1:9988; } # Configuration for Nginx server { location / { root /var/www; index index.html; } # Proxy connections to the application servers […]

无法在反应应用程序中的组件之间成功路由

我有一个静态反应的应用程序(这意味着没有服务器端渲染)位于example.com/web-class.gr下。 我的问题是,当我使用我的侧边栏菜单时,我不能在组件之间路由。 例如。 当我导航到example.com/web-class.gr/css-intermediate页面加载按预期。 从现在开始,如果我导航到不同的lessonName页面按预期方式加载。 但我也有练习,当我按下菜单中的相应button时,我无法加载。 得到一个想法这是我的index.js文件: import React from 'react'; import { Link as ReactLink } from 'react-router'; import sidebarStore from './Sidebar/SidebarStore'; import lessonValues from '../../lessonValues'; import LessonStore from '../../LessonStore'; import SidebarLink from './Sidebar/SidebarLink'; export default class Sidebar extends React.Component { constructor() { super(); this.state = { SidebarIsCollapse: sidebarStore.getCurrentState() } this.NavMdPlaceholderClass = 'hidden-xs col-sm-4 […]

服务器渲染在静态网站上反应js

我一直在探索最近的反应,我看到你如何设置像节点到服务器呈现代码的东西。 我真的很感兴趣,因为速度的原因使用静态页面,但我不知道是否有可能使用静态html时,呈现反应组件。 我可以使用像nginx触发反应呈现? 还是我需要更多,不得不使用像节点,铁轨,或sinatra? 对不起,如果这是一个误导的问题,我没有强烈的服务器客户端交互意识。

在CakePHP项目中设置React

如何使用webpack在CakePHP webroot中设置React? 我有一个现有的CakePHP项目(模型,视图,控制器)。 我想在其webroot ( Project/Miniproject/index.html )中设置mini React项目。 index.html将会对api的控制器定义进行ajax调用。 – Project | – app | | – Controller | | – View | | – Model | | – webroot | | | – Miniproject | | | | – index.html [Mini react project] 我曾尝试安装React Transform Boilerplate 。 但它使用web开发服务器(并呈现localhost:3000上的文件)。 但是我想要运行CakePHP项目的nginx服务器上的文件。 当我访问url( Project/Miniproject/index.html )时,找不到dist/bundle.js因为它在内存中。 那么如何使用webpack在CakePHP webroot中设置React?

如何configurationNginx的反应路由器HistoryLocation?

我目前使用Nginx作为反向代理服务我的静态资产。 我使用的是React路由器的HashLocation设置,因为它是默认的,它允许我在没有问题的路由上刷新,不需要任何额外的configuration,但使用该设置的问题是必须具有/#/我的路线(例如http://example-app.com/#/signup )。 我现在试图切换到React路由器的HistoryLocation设置,但我不知道如何正确configurationNginx为所有路由(如http://example-app.com/signup )服务index.html。 这是我最初的nginx设置(不包括我的mime.types文件): nginx.conf # The maximum number of connections for Nginx is calculated by: # max_clients = worker_processes * worker_connections worker_processes auto; # Process needs to run in foreground within container daemon off; events { worker_connections 1024; } http { # Hide nginx version information. server_tokens off; # Define the MIME […]