Question

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

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

我已经设置了一个axios请求，要求在azure上发送到后端服务器。它是一个独立的.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};

问题不在我的反应组件中，因为这两个console.log（）调用显示正在接收输入的值。如果我从package.json中删除“secure”：false设置，则请求失败并显示Http Error：500。但如果我使用安全设置，则会失败并显示404页面。有人可以说清楚我做错了什么吗？我可以只在“localhost”上使用代理吗？文档另有说明。非常感谢任何帮助。

我已验证为Azure管理门户上运行dev服务器的域启用了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使用使用https://github.com/chimurai/http-proxy-middleware#options

的WebPackDevServer

所以你可以使用同一个

中的所有选项

现在，在外部托管服务器的情况下导入的一个密钥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});

Answer 2

创建反应应用http-proxy-middleware，并应支持全套选项。

我会尝试一些事情：

如果您希望深层嵌套多个级别（例如，value）

/api/**

/api/*

如果您要远程代理某些内容（而不是在本地主机上），则可能需要添加/api/user/login
您可能希望保留changeOrigin: true，因为您没有使用https运行secure: false。

总的来说，我会尝试

localhost

Answer 3

经过数天尝试失败后，我终于找到了可行的设置。代理配置如下：

"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托管的后端上运行。我会优先考虑它的工作原理，但至少现在我可以继续我的项目。

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

3 个答案: