当后端托管在 Azure 上时，create-react-app 代理请求失败并显示 404

Question

我在设置我的 create-react-app 应用程序以将请求代理到我在 Microsoft azure 上的测试主机时遇到了一些麻烦。我在我的应用程序 package.json 中设置了代理，如下所示：

"proxy":{
   "/api/*":{
   "target":"https://mytestbackend.azurewebsites.net",
   "secure":false
}
}

我已经在 Azure 上设置了一个 axios 请求发送到后端服务器。它位于一个独立的 .js 中，我从我的一个反应应用程序的事件中调用它。它看起来像这样：

import axios from 'axios';

const login = async (username, password) => {
   console.log("Username to send is:"+username);
   console.log("password to send is:"+password);
   let response = await axios.post('/api/user/login',  {username:username,password:password});
   console.log(response);
};

export {login};

问题不可能出在我的 React 组件中，因为那两个 console.log() 调用表明正在接收输入的值。如果我从 package.json 中删除 "secure":false 设置，请求将失败并显示 Http 错误：500。但是如果我使用安全设置，它将失败并显示 404 页面。有人可以阐明我做错了什么吗？我只能在 "localhost" 上使用代理吗？文档另有建议。非常感谢任何帮助。

我已验证在 Azure 管理门户上开发服务器运行所在的域已启用 CORS。如果我直接使用后端的 URL 来执行请求（即，不使用 create-react-app 代理），它就可以工作。问题一定出在代理的配置方式上。

不使用安全时发生的 HTTP Errpr 500 的响应文本是：

Proxy error: Could not proxy request /api/user/login from localhost:3000 to https://mytestbackend.azurewebsites.net (undefined).

附加信息：我还在我的开发机器上本地测试了运行我的后端。出现错误消息，但括号中的 "undefined" 表示 "UNABLE_TO_VERIFY_LEAF_SIGNATURE"。如果使用“secure:false，我可以成功调用登录端点，但是调用其他需要身份验证的端点会失败，因为cookie不是由axios发送的。

正在做： curl -v https://mytestbackend.azurewebsites.net/api/user/login

有这个输出：

* SSLv3, TLS handshake, Client hello (1):
* SSLv3, TLS handshake, Server hello (2):
* SSLv3, TLS handshake, CERT (11):
* SSLv3, TLS alert, Server hello (2):
* SSL certificate problem: unable to get local issuer certificate
* Closing connection #0
curl: (60) SSL certificate problem: unable to get local issuer certificate
More details here: http://curl.haxx.se/docs/sslcerts.html

curl performs SSL certificate verification by default, using a "bundle"
of Certificate Authority (CA) public keys (CA certs). If the default
bundle file isn't adequate, you can specify an alternate file
using the --cacert option.
If this HTTPS server uses a certificate signed by a CA represented in
the bundle, the certificate verification probably failed due to a
problem with the certificate (it might be expired, or the name might
not match the domain name in the URL).
If you'd like to turn off curl's verification of the certificate, use
the -k (or --insecure) option.

Answer 1

创建 React 应用程序 http-proxy-middleware，并且应该支持全套选项。

我会尝试的一些事情：

匹配的路径可能是 /api/** 而不是 /api/* 如果你想嵌套多层深度（例如 /api/user/login）
如果您要远程代理某些东西（而不是在本地主机上），您可能需要添加 changeOrigin: true
您可能希望保留 secure: false，因为您没有运行 localhost 使用 https。

总的来说，我会尝试

"proxy":{
   "/api/**": {
     "target": "https://mytestbackend.azurewebsites.net",
     "secure": false,
     "changeOrigin": true
   }
}

Answer 2

经过数天的尝试但未成功，我终于找到了一个可行的设置。代理配置如下：

"proxy": {
"/api/user/login": {
  "target": "https://localhost:44396",
  "logLevel": "debug",
  "secure": false
},
"/api/secured/userinfo": {
  "target": "https://localhost:44396",
  "secure": false,
  "logLevel":"debug",
  "secure":false 
}

客户端对两个端点的请求有withCredientials:true

 try {
    await axios({
        method:'post',
        url:'/api/user/login',
        withCredentials:true,
        data:
            {username:username,password:password}}
        );

    let userinfo =await axios.get('/api/secured/userinfo',{withCredentials:true});

   return userinfo;

如您所见，我已开始在我的本地开发机器上进行测试。无论出于何种原因，此设置都拒绝在 azure-hosted 后端上运行。我更希望它能像我最初预期的那样工作，但至少现在我可以继续我的项目了。

Answer 3

create-react-app 使用 WebPackDevServer 而使用 https://github.com/chimurai/http-proxy-middleware#options

因此您可以使用同一个

中的所有选项

现在，在这种外部托管服务器的情况下，导入的一个密钥 header 是 host。如果不正确，这有时会出现问题，请参见下面的示例

接下来是 cookie 可能与 localhost 关联，我检查过它们应该没有任何修改。但您可能还想使用 cookieDomainRewrite: "" 选项

所以我要使用的最终配置如下

"proxy":{
   "/api/*":{
   "target":"https://mytestbackend.azurewebsites.net",
   "secure":false,
      "headers": {
        "host": "mytestbackend.azurewebsites.net"
      },
      "cookieDomainRewrite": ""
  } 
}

您还想在您的客户端上使用 withCredentials:true

let userinfo =await axios.get('/api/secured/userinfo',{withCredentials:true});

当后端托管在 Azure 上时，create-react-app 代理请求失败并显示 404

create-react-app proxy request fails with 404 when backend is hosted on Azure

azure

reactjs

create-react-app