I created a simple REST API with express and bodyParser which returns a json object on a GET request to the base url. Works fine in the browser and returns what's expected:
API Endpoint: https://jk9j0.sse.codesandbox.io/.
Code: https://codesandbox.io/s/magical-montalcini-jk9j0
Then I setup a basic react app to consume this API by sending a GET request with axios. But on calling the API endpoint above, I get no response. Trying to catch the error.request object, I don't see anything that's clearly incorrect in the headers. The error object itself says 'Network Error'. Not sure why, when the API works as expected in a browser.
Note: When I replace my API url with another one, which is expected to send a similar response, things work great.
The one that works: https://jsonplaceholder.typicode.com/posts/
I haven't created that one, but used it to model my json object.
React Code: https://codesandbox.io/s/hungry-sun-rq94r
I've tried investigating from several angles but no luck. What am I missing here? Do I need to set some headers in the request? Is this a CORS issue?
Yes, it turned out to be a CORS issue. Had to apply header in the API end-point before sending response. res.header("Access-Control-Allow-Origin", "*").
Related
I have an api and frontend I'm trying to connect.
The frontend and API are deployed on a kubernetes cluster. I'm calling a GET method to populate some data and the data is not being loaded from the api. I checked the method call from chrome and the API url is appended twice.
For example, a successful GET request to my API to load this data would be example.app.com/users and the url chrome is showing in debug for the GET request is example.app.com/example.app.com/users.
I verified the API GET method works and returns the data I need. Any idea what I might be doing wrong?
Are you passing "example.app.com/users" to the function that executes the GET API?
If you pass "/users", does the result work as you expect?
i am Learning Python and at the moment i am experimenting with the request Module.
What i did so far:
This is the API Documentation for the Endpoint i used:
https://trackapi.nutritionix.com/docs/#/default/post_v2_natural_exercise
And this is the associated Python Code:
EXERCISES_ENDPOINT = "https://trackapi.nutritionix.com/v2/natural/exercise"
header = {
"x-app-id": APP_ID,
"x-app-key": API_KEY
}
body = {
"query": "Ran 2 miles and walked for 3Km."
}
response = requests.post(url=EXERCISES_ENDPOINT, headers=header, json=body)
The corresponding http Request URL should be:
https://trackapi.nutritionix.com/v2/natural/exercise?Ran%202%20miles%20and%20walked%20%20for%203Km.
My Problem is as follows:
In Python the code ist working perfectly fine and my response is as expected
If i use Postman, this works fine too, because in both -Python and Postman - i can specify my Request as a POST Method
But if i use the URL in my MS Edge Browser (and Chrome too) i get an Error: Cannot GET /v2/natural/exercise
The Header information are ok, because i told the Browser them per "ModHeader" Extension.
But why is my Browser doing a GET and not a POST and how can i change this with the developemant tools from MS Edge Browser.
Important for my learning is to know why the Browser do a GET??
Is the Browser only able to do GET in generel and the other Methods (POST, PUT, DELETE) are not possible in this way. But that makes no sense for me :)
Thanks a lot in advance
But why is my Browser doing a GET and not a POST
Presumably because you are trying the address into the address bar of the browser.
That is designed to make a GET request because there is nothing in the UI designed to collect any of the data needed to make another request type.
The usual way to make a POST request would be to provide a user interface for it in the form of an HTML <form>.
I got a problem, my API laravel doesn't work when it run on my reactjs. When I check, i got failed response data. But,it work fine in postman. Here's my code
This is in reactjs :
This code in ReactJs
and this is in laravel API :
this code in laravel API
i use axios to get response from my API, and i have already set my cors before in my Laravel, just one function can't get response.
here the respons :
response in postman
response in console log react when use chrome
response in network google chrome
I already try to set up cors again and try to change method put to get and put to post, and still doesnt work. I don't know where the problem is.
Maybe you can try to connect with jquery or javascript XMLHttpRequest to make sure where is the problem
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.
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.