Communication with an API - angularjs

I have a Symfony2 API and an AngularJS app which consumes it.
I'm facing a problem when trying to connect a member. It should work like this :
The client sends a POST request to the API, on the route /api/public/users/connection. The content of the request is a JSON object like this : {"username":"qzdqzd","password":"qzdqzdc"}
The server verifies the request and send back either a 400 response, with a body containing the error message (such as "This username does not exist."), or a 200 response, with the API key in the content to be stored in a cookie.
I'm facing a very strange problem. I have two instances of the API : one in my computer, in local, and the other one on the web (http://api.galaxia-online.com). When my AngularJS code is configured to request the local API, it works as expected :
It's in french, but you can see in red the error message.
But when I change my AngularJS code to request the distant API, with the same request, I receive a 400 error code, but with no content in the response. Plus, Firefox tells me that I have a CORS problem.
I thought at first that I misconfigured CORS on the server, but! When I try to do the exact same request with a dedicated browser addon (RESTClient in my case), it works perfectly :
So I start to think that the problem could be caused by AngularJS. The request seems valid, and seems to work as it do in RESTClient, but AngularJS doesn't receive anything.
I'll be grateful if someone has a clue.

Related

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

(NodeJS / AngularJS) POST request with 'x-auth' token to server, but token seems to get lost in preflight (no error though)

Background
I have a simple NodeJS server hosted on localhost/Heroku which handles JWT authentication for adding data to the registered user amongst other (unrelated) things.
Here's the GitHub: https://github.com/mlee93dev/pw-keychain-server
I also have a simple Angular2 client on localhost/Heroku for this server:
https://github.com/mlee93dev/pw-keychain-app
Currently, I have my JWT access tokens configured to last only 5 seconds in my server for development purposes.
I have my CORS stuff configured to the best of my knowledge as shown below in server.js:
CORS configuration pic
The Problem
On Postman I test the POST request and I get the expected response - a JWT expiration error:
Postman POST pic
However I don't get the same response on my client - rather, I get a 'JWT must be provided' error:
Client POST pic
As you can see in the pic above, I know I'm actually attaching a token as I console.log it. Here's a pic of the code:
Client POST code pic
So what's confusing me more is that my DELETE request (for logging out) also implements the same x-auth token to request code, and it works in both Postman + client, as seen here:
DELETE error response
DELETE code
So yeah, I'm pretty confused. My guess is I have to configure my CORS some more to allow x-auth header on POST requests specifically somehow? Even though I think it should do that already with my current configuration.
You are providing the body in post request instead of headers.
Angular POST request
So in your post request just do the following
this.http.post(yoururl, {},{headers:new Headers({'x-auth':token})})...
And it should work.

Method Not Allowed Error after redirecting in AngularJS

So what is going on is I have integrated the PayU payment gateway in my angular app. It has a success and failure url to which it gets redirected to according to the payment response. Now those urls are client's url where the client receives the response from PayU after payment success/failure. It is sent as a POST with few query parameters that are to be parsed.
Now the problem is that since the request is a POST request on a localhost url(with the same port on which I am already running the app), the console says that 'Method is not Allowed'.
The success url is http://localhost:8005/#!/payment/success
My app is running on http://localhost:8005 (which is the same).
Now I tried to define the url in app.js so as to receive the response as follows -
.state('successScreen',{
url:'/payment/success/',
templateUrl:'partials/successScreen.html',
controller:'paySCtrl'
});
but it doesn't work.
when I am redirected to the url(http://localhost:8005/#!/payment/success) after payment, I am getting that 'Method Not Allowed' error.
The same url is working with GET request though but it cannot be a GET request as it is a response from third party so cannot change it from POST to GET.
So can anyone please help me with how can I overcome this thing or a work around maybe?

"No Access Control Allow Origin" in AngularJS

I am trying to develop a website that reads a JSON response from a certain endpoint and post it after certain processing to the page.
I am using $http.get(url) (AngularJS)
However I am facing problems getting the response.
I have tried to use other URLs and it worked then the cause of the problem probably is not the code.
The Error is: "No Access Control Allow Origin header is present on the requested resource".
Other responses suggested something related to CORS and privacy issues ; but when i type the URL directly in my browser it gives a JSON response directly. (So basically there is no privacy issues in the server side right?)
My question is what should I do ? Is there another way to get the content of the page pointed by the url (i am sure that it will only contains the JSON response)
Thanks in Advance
I came across this question:
1. If we substitute the URL in the address bar, it is similar to receiving data from the server of this site
In order to send requests to other servers need to use JSONP HTTPS for secure channel
Sending data can be carried out, but with the replies received will be a problem in the form JSON
Please send to the server if use PHP, then use CURL
JS->Our server->Server api->Our server->JS

working with $http.post function

I want to save data using AngularJS and RestApi. I am sending an object in data parameter.
I tried both $http.post() direct method and $http() method , but non of these are working.
Always the error coming is "Method not allowed-405"
I am running on local machine.
Edit:
Eventually by doing some modifications like I specified "localhost:xxx" before the 'api/abc', now I am getting the error as "The requested resource does not support the http method 'POST'".
The reason is that the API you're using does not support POST requests to the URL you're trying to POST to
More info from http://www.checkupdown.com/status/E405.html below
All Web servers can be configured to allow or disallow any method. For example if a Web server is 'read-only' (no client can modify URL resources on the Web server), then it could be set up to disallow the PUT and DELETE methods. Similarly if there is no user input (all the Web pages are static), then the POST method could be disallowed. So 405 errors can arise because the Web server is not configured to take data from the client at all.

Resources