React/ViteJS：部署到 IIS 后，使用代理和 Apigee 找不到 404

Question

我处理这个问题几天了，真的需要你的帮助。

我在 ViteJS 中有一个项目，可以访问 Apigee (GCP) 上的公共端点。我在开发环境中实现了一个代理来消除 CORS 问题，它在我的本地完美运行。

// Vite.config

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  build: { chunkSizeWarningLimit: 1600 },
  server: {
    proxy: {
      "/api/v1": {
        target: "https://apigee.test-svc-232/api/v1",
        changeOrigin: true,
      },
    },
  },
});

// Test.js

const fetchData = async () => {
  let data = qs.stringify({
    grant_type: "client_credentials",
  });

  let config = {
    method: "post",
    maxBodyLength: Infinity,
    url: "/api/v1",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      Authorization:
        "Basic ...",
    },
    data: data,
  };

将其部署在 IIS 服务器上的生产环境中时会出现此问题。我的web.config文件如下：

//Web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Reverse Proxy to api" stopProcessing="true">
          <match url="^api/v1$" />
          <action type="Rewrite" url="https://apigee.test-svc-232/api/v1" />
        </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>

给定的 apigee 网址只是一个参考，真正的网址可以完美运行并返回数据（它是公开的并开放供使用）。

部署到 IIS 后，我在 API 调用中收到 404 Not Found。 请求网址：https://test.website.net/api/v1 请求方式：POST 状态代码：404 未找到

重写规则似乎无法正常运行，因为 API 调用导致 404 Not Found 错误。这表明请求未通过代理正确路由，这是为了避免 Apigee 出现 CORS 问题。

我的 Web.config 应该具有什么正确配置，或者我应该考虑哪些其他注意事项来解决我的问题？我需要更改 React 代码中的任何内容吗？我应该检查 IIS 配置还是包含任何证书等？

我检查了这篇文章并尝试了该解决方案，但仍然不起作用：React：部署到 IIS 后未找到代理 404

提前致谢！

Answer 1

尝试将重写操作更改为

url="/index.html"

，确保React应用程序在

React Routes

规则中正确处理客户端路由。

如果这不起作用，请使用失败请求跟踪获取详细的日志信息，这将帮助您更好地查明问题的原因。