7

I am having a bit of trouble setting up my create-react-app application to proxy requests to my test hosting on Microsoft azure. I have set up the proxy in my app's package.json as follows:

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

I have set up an axios request to be sent to the backend server on azure. It is in a stand-alone .js which I call from one of my react application's events. It looks like this:

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

The problem can't be in my react components, because those two console.log() call show that the values entered are being recieved. If I remove the "secure":false setting from package.json, request fails with Http Error: 500. But if I use the secure setting, it fails with a 404 page. Can someone please shed a little light on what am I doing wrong? Can I only use the proxy on "localhost"? The documentation suggests otherwise. Any help is greatly appreciated.

I have verified that CORS is enabled for the domain on which the dev server is running on the Azure Management Portal. And if I do the request by using the backend's URL directly (that is, not using the create-react-app proxy), it works. The problem must be something in the way the proxy is configured.

The response text for the HTTP Errpr 500 which happens when not using secure is : 

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

Additional info: I have also tested by running my Backend locally on my development machine. The error message occurs but the "undefined" in the parenthesis says "UNABLE_TO_VERIFY_LEAF_SIGNATURE". If using "secure: false, I can call the login endpoint successfully, but calls to other endpoints which require authentication fail because the cookie is not sent by axios.

Doing: curl -v https://mytestbackend.azurewebsites.net/api/user/login

Has this output:

* 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.
Improve this question
7
  • FE is also deployed on the same server or a different one? If the two servers are different then did you open the port and IP for communication? Also please let the 500 error happen and post the exception details that are there Commented Apr 2, 2018 at 14:25
  • FE is running on localhost (it's my dev environment), but connecting to backend hosted in azure. I am using create-react-app's proxy configuration to forward requests. If I make my frontend request to backend with hardcoded URL, it works. The problem I see is that Axios is not sending my cookie when I do Ajax request. CORS is enabled on both the backend and the Azure portal. I will post the error 500 details soon. Commented Apr 2, 2018 at 16:11
  • I have updated my question to include the details of the exception. Commented Apr 2, 2018 at 21:12
  • What is the output of curl -v https://mytestbackend.azurewebsites.net/api/user/login Commented Apr 3, 2018 at 4:38
  • I have included curl's output in the question. Commented Apr 3, 2018 at 10:47

3 Answers 3

Reset to default
4

create-react-app use WebPackDevServer which uses https://github.com/chimurai/http-proxy-middleware#options

So you can use all the options from the same

Now one key header that is import in such cases of externally hosted server is host. This at times can issues if not correct, see below example

Websocket works on EC2 url but not on ElasticBeanstalk URL

Next is the cookies might be associated with localhost, i checked and they should go without any modification. But you might want to use the cookieDomainRewrite: "" option as well

So the final config I would use is below

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

Also on your client you want to use the withCredentials:true

let userinfo =await axios.get('/api/secured/userinfo',{withCredentials:true});
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Hi, sorry for the long time, and I know the question's bounty is expired. I have since decided not to use React, but using ASP.NET's Razor for server-side rendering. I'd still like to get this working, though. This configuration did not work for me, either. Cookies are still not being sent. and the request to /api/secured/userinfo fails.
I finally managed to get it working. I used your configuration plus setting HTTPS=true in .env.development.
Glad it worked for you. Thanks for accepting the answer
In which file i have to write this config if i'm using create react app?
@RAVIPATEL, in your package.json
|
2

After days of trying unsuccessfully to do this, I finally found a setup that works. Proxy is configured like this:

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

Request to both endpoints on the client have 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;

As you can see, I've moved to testing on my local dev machine. For whatever reason, this setup refuses to work on the azure-hosted backend. I would have preferred that it work as I originally intended, but at least now I can continue with my project.

Improve this answer

1 Comment

Can you try adding cookieDomainRewrite:"" inside the proxy object and try. With secure:false, also look at changeOrigin: true option as well
1

Create react app http-proxy-middleware, and should support the full set of options.

Some things I would try:

  • The path to match may be /api/** instead of /api/* if you want to nest multiple levels deep (eg. for /api/user/login)

  • You may need to add changeOrigin: true if you're proxying to something remotely (not on localhost)

  • You will likely want to keep secure: false as you aren't running localhost with https.

So in total, I would try

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

1 Comment

After trying this, I get this error message: SyntaxError: Invalid regular expression: //api/**/: Nothing to repeat

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.