尝试使用地址栏或刷新页面访问时，Azure Web应用程序返回404

Question

我需要一点帮助我的天蓝色应用程序，我有一个使用在Azure上托管的ReactJS的网站，但有些奇怪的事情正在发生。

我可以使用地址栏访问mydomain.com或www.mydomain.com的唯一页面。如果我尝试访问类似mydomain.com/login的内容，则会返回404并显示包含以下消息的白页

"The resource you are looking for has been removed, had its name changed, or is temporarily unavailable". 

另一件事是，如果我从家里开始，我通常可以使用该网站。例如，如果我在主页并单击一个按钮，将我发送到/ login工作，但如果我尝试刷新或直接从地址栏，则不起作用。

现在，我还在azure上进行了具有完全相同代码的分段，并且工作得很好，我可以从任何地方访问任何东西。

有没有人对此有所了解？

Answer 1

任何面临同样问题的人都可以使用下面的web.config文件，该文件应放在/site/wwwroot目录下

<?xml version="1.0"?>
<configuration>
 <system.webServer>
 <rewrite>
 <rules>
 <rule name="React Routes" stopProcessing="true">
 <match url=".*" />
 <conditions logicalGrouping="MatchAll">
 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
 <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
 </conditions>
 <action type="Rewrite" url="/" />
 </rule>
 </rules>
 </rewrite>
 </system.webServer>
</configuration>

Answer 2

好像你的React routing工作不正常。

您可以在URL中使用哈希（＃）来绕过问题：

例：

使用http://example.com/#/about而不是http://example.com/about

在你的路由器中你应该有这样的东西：

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <Route path="#/repos" component={Repos}/>
      <Route path="#/about" component={About}/>
    </Route>
  </Router>
), document.getElementById('app'))

缺点：

'丑陋'的URL这种方法无法实现服务器端渲染。就SEO而言，您的网站由一个页面组成，几乎没有任何内容。

Answer 3

我解决了这个问题，在暂存时，azure app是一个未在生产应用程序中创建的web.config文件，这就是问题存在的原因，因此在将web.config文件复制并粘贴到生产后，一切正常。