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

Question

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

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

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

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 Error: 500。但是如果我使用 secure 设置，则会失败并显示 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).

其他信息:我还通过在我的开发计算机上本地运行我的后端进行了测试。出现错误消息，但括号中的“未定义”显示“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

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

因此您可以使用同一选项中的所有选项

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

Websocket works on EC2 url but not on ElasticBeanstalk URL

接下来是 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});