Azure Web应用程序的其他路径返回错误

xggvc2p6  于 2023-08-07  发布在  其他
关注(0)|答案(6)|浏览(90)

我使用create-react-app创建了一个react应用程序。我正在尝试将其部署在Azure Web应用程序上。我创建了一个构建并使用FTP进行部署。
当有内部重定向从React的应用程序,我能够看到的网页。但是当我尝试直接转到url时,我得到了这个错误。
x1c 0d1x的数据

例如:

如果基本URL是www.example.com,并且应用程序内部重定向到/new,则页面转到www.example.com/new。但如果我直接尝试加载www.example.com/new,则会得到上面显示的响应。这在本地测试中不会发生

**Demo:**我创建了一个demo here

ijxebb2r

ijxebb2r1#

为了让它为我工作,我在公共文件夹中添加了一个web.config文件(这是favicon.icoindex.htmlmanifest.json所在的位置),并添加了以下代码:

<?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>

字符串
我希望这可能会有所帮助:)

eivnm1vs

eivnm1vs2#

将下面的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>

字符串

vhipe2zx

vhipe2zx3#

当有内部重定向从React的应用程序,我能够看到的网页。但是当我尝试直接转到url时,我得到了这个错误。
第一个月
如果您使用网络工具捕获网络流量,当您单击按钮新建渲染(重定向)新页面时,您会发现它只是在本地更改URL,而不是真正向服务器请求http://data-trigger-mass-test.azurewebsites.net/new。当您直接浏览并向服务器请求http://data-trigger-mass-test.azurewebsites.net/new时,服务器找不到资源,因此返回(404)错误。为了使URL http://data-trigger-mass-test.azurewebsites.net/new在服务器端和客户端都能工作,您可能需要在服务器端和客户端都为它设置路由。

drnojrws

drnojrws4#

您的服务器应该始终发送所有客户端请求的根html文件,以便它可以通过路由来做出React。
如果服务器是NodeJs,请在server.js中添加如下内容。

app.get('*', (req, res) => {
   res.sendFile('public/index.html', { root: __dirname });
});

字符串

7kqas0il

7kqas0il5#

这个方法奏效了:

<?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>

字符串
我在index.html所在的公共文件夹中创建了一个web.config文件,并添加了上述代码。

ddarikpa

ddarikpa6#

routers.tsx文件中HashRouter代替BrowserRouter

我用

import { HashRouter as Router, Routes, Route } from "react-router-dom";

字符串
代替了

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";


这对我很有效但这对我来说是一个临时的解决方案。我需要用下面的解决方案进行更多的研究。
我尝试了很多次下面的代码不适合我。但是我看到很多人的代码都使用这个解决方案。
index.html所在的根目录下创建一个web.config文件,并在paste中创建以下代码。

<?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>

相关问题