React：部署到 IIS 后未找到代理 404

Question

我真的需要您的帮助和建议，我已经搜索了两周，但无法解决我的代理问题。
我正在设置下面的“setupProxy.js”以在从（Web 服务器）请求 API/端点时绕过 CORS。 但是，代理和 Origin 替换仅在使用终端运行时在 localhost 3000 上有效。由于某些原因，部署到 IIS 后它不起作用，它不断收到“404 Not Found”。您能告诉我应该做什么来解决这里的问题吗？

setupProxy.js：

app.use('/XXX.Order.API',
    createProxyMiddleware({
        target:'https://gcm.dellsvc',
        secure: false,
        changeOrigin: true                 
    })
);  

axios 调用：

let XXX =
      "/XXX.Order.API/api/v1/orders/sample"

终端/本地主机：3000 结果：（200 ok） 但是，在 IIS 中浏览：8080 (http) : (404 Not Found)

web.config 文件：

<?xml version="1.0"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
     <rule name="Rewrite Text Requests" stopProcessing="true">
         <match url=".*" />
             <conditions>
                        <add input="{HTTP_METHOD}" pattern="^GET$" />
                        <add input="{HTTP_ACCEPT}" pattern="^text/html" />
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
             </conditions>
             <action type="Rewrite" url="/index.html" />
     </rule>
</rules>
    </rewrite>
  </system.webServer>
</configuration>

Answer 1

我在两周内遇到了完全相同的问题。最后我有一个满意的解决方案。 http-proxy-middleware 或 package.json 中的代理（在我看来）仅用于开发目的。 您创建的内容绝对正确，但您只能在开发中使用它。 对于生产设置，仅在 url 重写级别进行处理。我认为这是合乎逻辑的。它与代码分开，如果代码中存在错误（例如指向本地主机的错误端点），它不会影响生产。

解决方案是修改 web.config 文件中的 url 重写，该文件安全地存储在 IIS 中。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Reverse Proxy to api" stopProcessing="true">
          <match url="^api/(.*)" />
          <action type="Rewrite" url="https://api.example.com/{R:0}" />
        </rule>
        <rule name="Reverse Proxy to pusher" stopProcessing="true">
          <match url="^pusher/(.*)" />
          <action type="Rewrite" url="https://pusher.example.com/{R:0}" />
        </rule>
        <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" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>