localhost http 500 internal server error stripe react - reactjs

I try to use stripe in my LocalHost, but when I post a request to stripe server, I've got this error :
POST https://localhost:3000/charge 500 (Internal Server Error)
But, on the stripe dashboard, the request have 200 return code. In accord with the support, the problem come from my localhost, but I don't have a idea ...
I have just follow this tutorial : https://stripe.com/docs/recipes/elements-react#setup
Thanks !

It's ok, it's work.
This is why it's work now :
If you are on windows, install BashUbuntu, and make all command in bashUbuntu !

First have a look at the access log. 500 error indicates that your front end has some problems talking to the back end, though the TCP port itself and HTTPD server are alive. In the access log (location depends on your OS) you will see the error. Then you will make further steps.

Related

How do I identify cause of Axios "Network Error"?

I can't get an Axios "get" request working for a front-end/back-end pair after moving the code from CentOS 7 to a CentOS 8 instance. The code in question works just fine on a different AWS EC2 instance. I can't make it work on the new EC2 instance running Rocky Linux v8.5.
When I catch the exception to look at the error, I see a most unhelpful:
Error: Network Error
I can find NO information about the complaint was or how to fix it. I can't get ANY useful information about what is causing the issue. I'm sure it's something stupid and easy to fix -- it would be much easier if I can somehow get the technology stack to tell me what the issue is.
I use the axios component to access a Node Express service running on the same instance that hosts the React app. The service is listening to https on port 7003. The React app calls this server, and returns data provided by the service.
I use axios for all communication between the React app and the rest of the world, so I need to fix this.
I use VisualStudio Code (VSC) to develop my React and NodeJS code.
When I exercise the service using wget, it seems to work:
$ wget "https://my.domain.name.com:7003/getEnvironment"
--2022-02-24 21:46:46-- https://my.domain.name.com:7003/getEnvironment
Resolving my.domain.name.com (my.domain.name.com)... 172.30.2.147
Connecting to my.domain.name.com (my.domain.name.com)|172.30.2.147|:7003... connected.
HTTP request sent, awaiting response... 200 OK
Length: 11205 (11K) [application/json]
Saving to: ‘getEnvironment’
getEnvironment 100%[===================================>] 10.94K --.-KB/s in 0s
2022-02-24 21:46:46 (220 MB/s) - ‘getEnvironment’ saved [11205/11205]
I notice that wget says it's using "HTTP" even though I've given it "https" in the command-line.
I run the front-end in VSC using the React/VSC development server. That server listens on port 3003.
I've turned on cors for the service, and it is listening on port 7003 as expected. That's why the wget works.
The back-end (service) code looks something like this:
...
var cors = require('cors');
...
var app = express();
...
app.use(cors({origin: true, credentials: true}));
...
The front-end code that is failing looks like this:
checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response.data;
} else {
const error = new Error(`HTTP Error ${response.statusText}`);
error.status = response.statusText;
error.response = response;
console.log(error);
throw error;
}
}
privateLoadEnvironmentUsingURL(url) {
return axios
.get(url)
.then((response) => {return this.checkStatus(response)})
.catch((error) => {
console.log(error);
throw error;
});
}
I've exercised this with both front-end and service in VSC. The axios call is failing and so far as I can tell is doing so before ever invoking the service.
It takes awhile to fail, leading me to suspect a timeout is in play. I see no indication in the nodejs service code that the request is actually hitting the service.
It therefore appears that the "preflight" negotiation is blocking this call. Turning on cors is pretty much all I know how to do -- I don't have deep insight into cors.
I've been waving voodoo chickens at this code all afternoon to no avail.
How do other developers discover how to fix problems like this when the technology stack presents so little information about what is actually happening?
How do I get this working?
I found and solved the problem, a network configuration issue completely outside axios/nodejs/react. The fact remains that I think it should somehow be possible for a developer to get at least a hint from the exception raised by axios.
For those who are interested, the problem turned out to be the AWS Security Group configuration for the new system. I had to open port 7003 in the Security Group, allowing access from my local IP address, in order for the request to be forwarded to the platform.
I suppose I should have thought of this sooner -- VSC spawns a special Chrome browser on my local system with its own private tunnel and such. It appears that that browser instance running on my local machine makes the request against port 7003. The AWS Security Group was blocking that port, and so the request never made it to the server.
I identified the issue by doing the wget from my local machine rather than from the new target EC2 instance. That failed, and then I attempted to connect with telnet. When the latter could not connect, I knew it was a Security Group issue.
The bottom line is that it is sometimes too easy to forget that ALL React code runs in the browser. I know that's obvious. but its implications sometimes are not.

Flask suddenly not receiving request from React client

I have React app in front-end (client), calling API provided by Flask back-end (server) via axios package.
Both client and server are running locally. Client: localhost:3000. Server: localhost:5000
The problem is: after many requests, the server can not receive request from client.
Here is the picture of the received requests, which is captured in backend:
As you can see, after some success request, the React app stuck with pending request:
The lastest request: 127.0.0.1 - - [11/Jun/2020 09:34:39] "GET /posts HTTP/1.1" is error 500, but in network tab of chrome, the request is still pending, so i dont know if the server received that request or not. Nothing shown in console log of chrome, no error printed in backend terminal windows (i have some lines of code to print error in backend), just the error 500
What am i doing wrong? If this question is still confused, please comment below and i can update more info about it. Thank you!
The fact that your server is reporting a 500 error, but the request on the client is still pending makes me think that something is wrong on the server side.
To verify this, you can try manually calling raise Exception() in one of your endpoints. Then instead of seeing the error resolve through the react app, you can try calling your endpoint with curl, or a client like Postman. If you are able to see a 500 error there, then the error is likely in your React app. If that request does not resolve, then the error is probably in the server.
Is an error response is being sent to the client? The way to do this in flask is using error handlers.
Thank you for helping me.
i debugged my server and found that 2 request call from react app were served by 1 cursor
(i used 1 connector.cursor for the whole connection => 2 request arrives in one moment => the cursor does not know how to serve the result)
=> Solution: change 2 request to 1 new request to new API, in new API, return the result which is containing both result of that 2 request

React WebSocket on server, Error during WebSocket handshake

I have made an application that uses a WebSocket. I want to run this application on a PLESK Server, but I get this error message 'WebSocket connection to 'wss://sub.domain.com/' failed: Error during WebSocket handshake: Unexpected response code: 404' when I visit the website.
After reading a few blogs, I came to the conclusion you have to adjust something in the NGINX settings, but this also appears to have no effect, or I have to do it wrong, that is also possible. (Another blog)
At the moment our API is installed on a subdomain (with the NodeJS add-on in plesk) and it also works. As soon as I start up the files locally I can connect to the WebSocket and the API so it must be up to the PLESK Server I think. At this moment only the NGINX 'Proxy mode' is off and the 'Additional nginx directives' empty.
Perhaps one of you is familiar with this problem?

Ionic App aborting request with response status -1

I'm using Ionic platform for my mobile application. Using angular
$http for sending requests to server.
Intermittently when Mobile app tries to access server $http goes to it's errorCallback with response status -1 only no other
data.
When I check log on server, not able to see any hit.
I've changed timeout of application to 2 minutes using interceptors.
I have used chrome debugger but it won't show anything apart from
request it forms, shows nothing in response and preview columns.
I got that in Ionic we use pre-flight to check if server is alive
before sending actual request. But it's for CORS; we have enabled
CORS on server and thats why app is working good since last 15 days.
Thought of using network packet tracer tool but if call not logged on
server no use of it. as Status -1 says $http aborted the request.
My Question is why it's aborting when I click once and do send
when I click same button again.
Please me help to figure out an issue.
After lots of debugging and surfing over internet for issue.
I guess that an issue was like mobile app sending pre-flight messages and so $http aborting the request and even some time Server played a culprit here how will tell you;
We have server hosted on AWS in where we had Load balancer in different zone and actual API server is in different zone. After changing them to same zone ask, production people to test now they are not getting this issue.
The another reason was we were using unstable mobile networks to test.
If any one have any thing else on this please let me know.

How to handle ERR_INSECURE_RESPONSE?

My AngularJS app uses $http.get() with https urls. If the server is using a self-signed certificate Chrome will reject the request and log an error ERR_INSECURE_RESPONSE to the console.
I would like to capture this specific error and prompt the user to configure their server with a valid certificate.
I've tried $http.error and $httpProvider.interceptors to get information about this error, but no relevant information is available in the error parameters.
I understand that Chrome is rejecting the request rather than the server, but using Angular, is there anyway to capture that Chrome has rejected the request with error ERR_INSECURE_RESPONSE?
I had the same issue in my ionic Project, but there is No way to overcome this issue clientside, this is security issue, go to server settings for SSL configuration, change DHPARAMS to 2048 bit key, that solved my issue,
Note : my server is amazon s3
I've been struggling with this for a while, trying to figure how to get a type of error in the $http error callback and show a helpful message to users. However, there seem to be no way to determine this specific error, the only way to determine it is to check whether the response.status is equal to -1 (this happens if the request was interrupted for some reason) - but it also might be -1 in other cases, like missing internet connection. So eventually I edited the error message, shown on status -1, to explain user what might be wrong.
Also, in my case users have to enter the server address, so in addition I added checking whether it's not an IP address (IP addresses cannot have valid SSL certificate, only self-signed, which would cause aforementioned error):
if (server_url.match(/^(?:[0-9]{1,3}\.){3}[0-9]{1,3}/)) {
// Show error message like "only domain names are allowed"
}
Hope that helps.

Resources