Accessing API endpoing from postman
After following the API tutorial, I attempted to post a GET request to http://localhost:3000/foo/bar and the response is just the web-app/index.html file.
When following the tutorial example of using the api from the client, I successfully get my data:
import React, { useEffect } from "react";
import { api } from "wasp/client/api";
async function fetchCustomRoute() {
const res = await api.get("/foo/bar");
console.log(res.data);
}
export const Foo = () => {
useEffect(() => {
fetchCustomRoute();
}, []);
return <>// ...</>;
};
But I'm still not able to get it from postman, am I misunderstanding something?
9 Replies
Hi @JLegendz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, you can use Postman to test your Wasp API endpoints. However, there are a few things to keep in mind:
1. API URL: Make sure you are using the correct API URL. If your app is running locally, the API URL is usually
<http://localhost:3000.> You can check this in your Wasp client configuration object. The apiUrl field contains the URL of your server (the app's backend). Wasp automatically sets it during development when you run wasp start. You can access it like this:
Source (https://wasp-lang.dev/docs/advanced/accessing-app-config#client-configuration-object)
2. CORS: APIs in Wasp are designed to be as flexible as possible, hence they don't utilize the default middleware like Operations do. As a result, to use these APIs on the client side, you must ensure that CORS (Cross-Origin Resource Sharing) is enabled. You can do this by defining custom middleware for your APIs in the Wasp file. Source (https://wasp-lang.dev/docs/advanced/apis#making-sure-cors-works)
3. API Declaration: Ensure that you have correctly declared and defined your API in Wasp. You need to declare the API in Wasp using the api declaration and define the API's NodeJS implementation. After completing these two steps, you'll be able to call the API from the client code (via the Axios wrapper), or from the outside world. Source (https://wasp-lang.dev/docs/advanced/apis)
If you are still facing issues, it might be helpful to inspect the request from your client-side code using the Dev tools and copy it as a "curl" command. You can then import this curl command into Postman. Source (https://discord.com/channels/686873244791210014/1217484119173501088)
Remember, if you are testing Wasp Operations (Queries and Actions), the payloads are somewhat internal and difficult to get right, but it's definitely possible.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @JLegendz, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?I simply needed to use 3001, not 3000.
I'm glad you figured it out! We should make the API URL more prominent. @martinsos another good candidate for the dev toolbar
Yes might be! @miho you mean that we should make it more obvious to people what the URL of the dev server is? Or did you mean something else?
Yep 👍
How could we do that?
. @martinsos another good candidate for the dev toolbarDev toolbar 😄
Yeah I got that, but what would we write there? Your dev server is running at ... ?
Hey, I think my confusion here was that my dev server ran at 3000. My api was at 3001.
In postman I was trying to do a GET on localhost:3000 and nothing would work. I assumed because my app ran on that port in the browser.