后端托管在Azure上时，创建-反应-应用代理请求失败，错误为404 [英] create-react-app proxy request fails with 404 when backend is hosted on Azure

问题描述

我在设置我的创建-反应-应用程序来代理我在Microsoft Azure上的测试主机的请求时遇到了一些问题。我已经在应用程序的Package.json中设置了代理，如下所示：

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

我已经设置了一个AXIOS请求，该请求将发送到Azure上的后端服务器。它在一个独立的.js中，我从我的Reaction应用程序的一个事件中调用它。如下所示：

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};

问题不可能出在我的Reaction组件中，因为这两个console.log()调用显示输入的值正在被接收。如果我从Package.json中删除"Secure"：False设置，请求将失败，并显示http错误：500。但如果我使用安全设置，它将失败并显示404页面。有没有人能解释一下我做错了什么？我只能在"本地主机"上使用代理吗？文档显示的情况并非如此。我们非常感谢您的帮助。

我已验证是否为Azure管理门户上运行开发服务器的域启用了CORS。如果我通过直接使用后端的URL(也就是说，不使用创建-反应-应用程序代理)来执行请求，它就可以工作。问题一定是配置代理的方式有问题。

未使用Secure时发生的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-vhttps://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.

推荐答案

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

因此您可以使用同一

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

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});

这篇关于后端托管在Azure上时，创建-反应-应用代理请求失败，错误为404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！