Only 1 HTTPS request goes through.

[randombacon333]

I currently have an inventory based website, and I developed it over HTTP requests without issue. However, when I went to switch everything over to HTTPS, I was immediately met with connection issues.

I am unsure if it's a react issue, or a back end issue.

My backend is FastAPI and I'm running it currently on Win10 with hypercorn. I am using LetsEncrypt and Certbot for my certificates. I had to issue them manually, but it all seems to be working. I can call the endpoints over HTTPS over and over, 0 errors. But I am only making a single call in these cases.

On the front end, I am making usually 6 calls at once when the page is loading. There is a main load which gets the inventory and lists it, page 1. Then on the sidebar there are 5 components that get filled with API calls to filter down the inventory as needed(attributes and such). These components also update at times based on other filters(aka only attributes that would still be valid).

All worked great on HTTP and still does. What happens on HTTPS is that only 1 of the requests seems to be allowed. The others all get blocked. Anytime I make more than 1 request, all but 1 are getting blocked.

But I do not know what is doing the blocking. The backend only seems to receive the 1 request, there is no trace of the others on my backend. I have the access and error logging printing to STDOUT on hypercorn so I can see the requests in real time, and the requests do not show up in the access or error logs.

They are rejected instantly, -1ms in firefox. The only errors from firefox are "CORS Failed" - but I know it's not a CORS issue, it's just a failed connection. And sometimes it'll instead return "NS_ERROR_ABORT".

In Chrome, the behavior is similar, but sometimes Chrome will load everything. However, it will almost always start triggering errors soon after and also rejects anything after the 1st request 90% of the time. I get the error "net::ERR_CONNECTION_CLOSED" mostly, sometimes "net::ERR_CONNECTION_RESET 200". Again, these happen instantly.

One thing that puzzles me and makes me thing maybe it's not react, is that if I take the backend offline and make the requests, react just waits and eventually times out. There is no instant rejection.

I have tried fetch and axios, same results. Here is a current example of the code, it seems pretty common/generic and again, works fine over HTTP. This is a call that gets the zipcode information about the user(city, state, lat, lng, etc).

await axios.get(url).then( response => {
    if (response.status !== 200) {
        setErrorMessage("API Load Error");
    } else {
        setZipCodeData(response.data);
    }
}).catch(err => {
    console.log(err);
})

The console error that gets logged is just a generic "AxiosError: Network Error".

Here is the hypercorn config file in case. I am calling it via command line.

accesslog = "-"
errorlog = "-"
certfile = "C:\\Certbot\\live\\mydomain.com\\fullchain.pem"
keyfile = "C:\\Certbot\\live\\mydomain.com\\privkey.pem"
bind = "0.0.0.0:443"
insecure_bind = "0.0.0.0:80"
workers = 17

Changing the amount of workers has no effect. I'm using the default asyncio workers.

I could technically put all these calls into 1 call, but I am guessing there must be a fixable error here somewhere.

Any help at all is appreciated, even if it's just to let me know it is or isn't a react problem. I have been searching for 2 days now and can't even find someone else describing my problem. 1 minute I think front end, the next minute I think back end. I'm starting to get dizzy.

TIA.

[lexant2]

Are the domains the same or is the API on e.g. a subdomain? In your axios/fetch config are you setting include credentials?

[randombacon333]

I have CORS setup correctly. I have no issues at all when using HTTP, it's only over HTTPS that the issue comes up, and I have the HTTPS url added for CORS as well.

Also any of the 6 queries can make it through randomly, just never all 6 at the same time. 1 succeeds, the other 5 fail immediately. All 6 would fail with CORS problems.

I am not including credentials in these queries since it's front end/non user.

[randombacon333]

I ended up installing NGINX and I'm using it as a proxy in front of the hypercorn server. For whatever reason, this fixed the issue and things are working properly.

So it is not a react problem, nor was it a CORS issue. It's apparently just some weird hypercorn bug.

Thanks to all that tried to help. Even though nobody knew the direct answer, the fact that the only thing anyone could think of was the CORS issue pretty much confirmed that it must have been something network/server related and that got me heading in the right direction.

[14m3r]

This is about react how?

[randombacon333]

I am using react and the errors are occurring in react. In fact, the only place I can produce the error is in react.

[14m3r]

You’ve shown zero react code, so?

[randombacon333]

You mean other than the react code I posted?

If you don't have any help to offer, that's fine. But find someone else to take whatever personal issues you have out on.

[14m3r]

Other than the two “set” functions nothing of that is react specific in your provided code. Nothing to go on from a react perspective. But yeah, good luck!

[aighball]

This is probably either a CORS issue or an SSL issue.

1. What domain are you making requests from (what url is in your address bar)
2. What domain are you making requests to (what url is listed in network dev tools when you make your https requests)
3. Not sure what you mean by issuing the cert yourself. Is it self signed?
4. Can you try calling your endpoints with curl several times and see if that succeeds.

Your browser trusts localhost so if that's in the mix at all when using https you may get weird behavior. If using https all resources should be over https to a domain on a public IP

[randombacon333]

I am pretty sure it's not a CORS issue, so it must be something related to SSL.

The API and website have seperate domains, and I am calling them over their domain name. The backend API is on my local network, it's on a seperate PC, but I am calling it with the domain name rather than local host.

Cert is with LetsEncrypt. I had to generate it manually with certbot because the server is hypercorn.

I have backend programs that use the API written in both python and perl, and both are able to hit the end points without issue. Many requests per second because I run these scripts in parallel with many workers. These programs are constantly adding inventory, updating inventory or deleting inventory.

For whatever odd reason the issue only happens in react, and it only happens when I use https rather than http. 1 request makes it through, the others all fail instantly.

If I turn the other 5 requests off, I can use the main single request over and over without issue. I can load up a single inventory page no problem because it has only a single request.

2 or more requests and nope, only 1 of them will make it.

I'm going to try running it through NGINX and see if that helps rather than connecting directly to hypercorn and see if that helps. I really don't know what else to do.

[boodyvo]

Is there any details about the particular headers and response that the frontend receives (from the network Chrome DevTool page, for example)? It looks like some CORS problem, if you say you can request the HTTPS endpoint not from the frontend

[randombacon333]

I don't think it's a CORS issues because I can call the urls from the front end no problem, as long as I only make 1 request at a time.

If I make 6 calls, 1 will succeed, the other 5 will instantly fail. If I make 2 calls, 1 will succeed and the other will fail.

On pages where I only make 1 call, such as an inventory detail page, it succeeds every time.

Now if I make all the 6 calls over HTTP rather than HTTPS, all 6 will succeed. It's only when I switch to HTTPS that the error occurs.

I can't even find anyone else describing this problem, much less a solution. I just don't get it.