Wasp•2w ago

APIs keep returning 404 error

I've been using chatgpt to write an OAuth integration with Notion. (my app needs access to Notion). However, I keep getting a 404 error whenever I try to do any api calls. I even have a foobar function & endpoint and it gets the same result. I've double checked all Notion API related configurations like client IDs, etc and made sure they are all correct. For the notion authorization, it is the callback that is failing. After authorizing Notion, it redirects to http://localhost:3000/api/auth/notion/callback?code=03ed839c-59bf-41a9-9d9b-e4a5697e9d03&state= but the UI shows a 404 error. In Postman, it shows the html from main.wasp and a "You need to enable JavaScript to run this app." message. I am using wasp 0.16.0 on macos (m1 pro macbook pro)

//#region Notion Integration
route ConnectNotionRoute { path: "/connect-notion", to: ConnectNotionPage }
page ConnectNotionPage {
  authRequired: true,
  component: import ConnectNotionPage from "@src/connect-notion/ConnectNotionPage"
}

api NotionOAuthCallback {
  fn: import { notionOAuthCallback } from "@src/server/notion",
  httpRoute: (GET, "/auth/notion/callback")
}
//#endregion

//#region Notion Integration
route ConnectNotionRoute { path: "/connect-notion", to: ConnectNotionPage }
page ConnectNotionPage {
  authRequired: true,
  component: import ConnectNotionPage from "@src/connect-notion/ConnectNotionPage"
}

api NotionOAuthCallback {
  fn: import { notionOAuthCallback } from "@src/server/notion",
  httpRoute: (GET, "/auth/notion/callback")
}
//#endregion

// src/server/notion.ts
import { Request, Response } from "express";

export async function notionOAuthCallback(req: Request, res: Response, context: any) {
   // oauth code
}

// src/server/notion.ts
import { Request, Response } from "express";

export async function notionOAuthCallback(req: Request, res: Response, context: any) {
   // oauth code
}

18 Replies

kapa.ai•2w ago

Hi @Sean. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the knowledge sources available, it appears that you're encountering a 404 error with your API calls, including a custom fooBar endpoint and the Notion OAuth callback. Let's address this issue step by step: 1. CORS Configuration: One common reason for API 404 errors in Wasp is incorrect CORS configuration. As mentioned in the Custom HTTP API Endpoints documentation, APIs in Wasp don't utilize the default middleware like Operations do. You need to ensure CORS is enabled for your APIs. To fix this, you can define custom middleware for your APIs in the Wasp file. Here's an example:

apiNamespace notionApi {
  middlewareConfigFn: import { notionApiMiddleware } from "@src/apis",
  path: "/auth/notion"
}

apiNamespace fooBarApi {
  middlewareConfigFn: import { fooBarApiMiddleware } from "@src/apis",
  path: "/foo"
}

apiNamespace notionApi {
  middlewareConfigFn: import { notionApiMiddleware } from "@src/apis",
  path: "/auth/notion"
}

apiNamespace fooBarApi {
  middlewareConfigFn: import { fooBarApiMiddleware } from "@src/apis",
  path: "/foo"
}

Then in your src/apis.ts file:

import { MiddlewareConfigFn } from "wasp/server";

export const notionApiMiddleware: MiddlewareConfigFn = (config) => {
  // Add CORS configuration here
  return config;
};

export const fooBarApiMiddleware: MiddlewareConfigFn = (config) => {
  // Add CORS configuration here
  return config;
};

import { MiddlewareConfigFn } from "wasp/server";

export const notionApiMiddleware: MiddlewareConfigFn = (config) => {
  // Add CORS configuration here
  return config;
};

export const fooBarApiMiddleware: MiddlewareConfigFn = (config) => {
  // Add CORS configuration here
  return config;
};

2. API Declaration: Make sure your API declarations in the Wasp file are correct. For the Notion OAuth callback, you might want to use api instead of apiNamespace:

api NotionOAuthCallback {
  fn: import { notionOAuthCallback } from "@src/server/notion",
  httpRoute: (GET, "/auth/notion/callback")
}

api NotionOAuthCallback {
  fn: import { notionOAuthCallback } from "@src/server/notion",
  httpRoute: (GET, "/auth/notion/callback")
}

3. Trailing Slash Issue: There's a known issue with Wasp where URLs with trailing slashes can result in 404 errors. Make sure your API endpoints don't have trailing slashes. If they do, remove them and try again. 4. Server-Side Rendering: The message "You need to enable JavaScript to run this app" suggests that your app might be trying to render on the server side. Wasp primarily focuses on client-side rendering, so make sure your app is configured correctly for client-side rendering. 5. Version Compatibility: You mentioned using Wasp 0.16.0. Make sure all your code and configurations are compatible with this version. Sometimes, examples or generated code might be for different versions, causing issues. 6. Debugging: To further debug this issue, you can add console logs in your API implementations to see if they're being reached. Also, check your server logs for any error messages that might provide more insight. If after applying these suggestions you're still encountering issues, it might be helpful to share more of your implementation details or the full error logs. The Wasp team is also working on improving error messages related to path configurations, which should make debugging easier in future versions. Custom HTTP API Endpoints documentation Configuring Middleware documentation ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sean, 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?

SeanOP•2w ago

@kapa.ai can you provide example cors configuration?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Certainly! I'd be happy to provide an example of CORS configuration in Wasp. Here's a typical CORS configuration that you can use as a starting point:

import cors from 'cors';
import { config, type MiddlewareConfigFn } from 'wasp/server';

export const apiMiddleware: MiddlewareConfigFn = (middlewareConfig) => {
  // Example of adding extra domains to CORS.
  middlewareConfig.set('cors', cors({ 
    origin: [config.frontendUrl, '<https://example1.com',> '<https://example2.com'],>
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization']
  }));
  return middlewareConfig;
};

import cors from 'cors';
import { config, type MiddlewareConfigFn } from 'wasp/server';

export const apiMiddleware: MiddlewareConfigFn = (middlewareConfig) => {
  // Example of adding extra domains to CORS.
  middlewareConfig.set('cors', cors({ 
    origin: [config.frontendUrl, '<https://example1.com',> '<https://example2.com'],>
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization']
  }));
  return middlewareConfig;
};

This configuration does the following: 1. It allows requests from the frontend URL (which Wasp automatically sets) and two additional example domains. 2. It allows GET, POST, PUT, DELETE, and OPTIONS HTTP methods. 3. It allows the 'Content-Type' and 'Authorization' headers. To use this configuration, you would need to add it to your Wasp file like this:

app todoApp {
  // ...
  server: {
    setupFn: import setup from "@src/serverSetup",
    middlewareConfigFn: import { apiMiddleware } from "@src/serverSetup"
  },
}

app todoApp {
  // ...
  server: {
    setupFn: import setup from "@src/serverSetup",
    middlewareConfigFn: import { apiMiddleware } from "@src/serverSetup"
  },
}

Remember to adjust the allowed origins, methods, and headers according to your specific needs. For more detailed information and examples, you can refer to the Configuring Middleware documentation. If you need to configure CORS for specific API routes or namespaces, you can use the apiNamespace feature as mentioned in the Custom HTTP API Endpoints documentation.

apiNamespace myApi {
  middlewareConfigFn: import { myApiMiddleware } from "@src/apis",
  path: "/api"
}

apiNamespace myApi {
  middlewareConfigFn: import { myApiMiddleware } from "@src/apis",
  path: "/api"
}

Then in your implementation file:

import cors from 'cors';
import { type MiddlewareConfigFn } from 'wasp/server';

export const myApiMiddleware: MiddlewareConfigFn = (middlewareConfig) => {
  middlewareConfig.set('cors', cors({ 
    origin: '<https://my-specific-domain.com',>
    methods: ['GET', 'POST'],
    allowedHeaders: ['Content-Type']
  }));
  return middlewareConfig;
};

import cors from 'cors';
import { type MiddlewareConfigFn } from 'wasp/server';

export const myApiMiddleware: MiddlewareConfigFn = (middlewareConfig) => {
  middlewareConfig.set('cors', cors({ 
    origin: '<https://my-specific-domain.com',>
    methods: ['GET', 'POST'],
    allowedHeaders: ['Content-Type']
  }));
  return middlewareConfig;
};

This approach allows you to have different CORS configurations for different parts of your API if needed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sean, 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?

SeanOP•2w ago

@kapa.ai i dont think this is a cors/middleware issue. I still get a 404 error on redirect from Notion

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books:

MEE6•2w ago

Wohooo @Sean, you just became a Waspeteer level 1!

kapa.ai•2w ago

---------------------- I apologize for the confusion in my previous response. You're right that this might not be a CORS/middleware issue, especially since you're getting a 404 error on redirect from Notion. Let's focus on the OAuth callback issue you're experiencing. Based on the information you provided earlier, it seems the problem is specifically with the Notion OAuth callback. When Notion redirects to <http://localhost:3000/api/auth/notion/callback?code=...,> you're getting a 404 error. This suggests that the route is not being recognized by your Wasp application. Here are a few things to check: 1. Route Definition: Make sure your route is correctly defined in your main.wasp file. The API definition you provided earlier looks correct:

api NotionOAuthCallback {
  fn: import { notionOAuthCallback } from "@src/server/notion",
  httpRoute: (GET, "/auth/notion/callback")
}

api NotionOAuthCallback {
  fn: import { notionOAuthCallback } from "@src/server/notion",
  httpRoute: (GET, "/auth/notion/callback")
}

2. File Path: Ensure that the file path in the import statement is correct. The file @src/server/notion.ts should exist and contain the notionOAuthCallback function. 3. Function Implementation: Check that the notionOAuthCallback function is correctly exported from the notion.ts file:

export async function notionOAuthCallback(req: Request, res: Response, context: any) {
   // oauth code
}

export async function notionOAuthCallback(req: Request, res: Response, context: any) {
   // oauth code
}

4. Server Restart: After making changes to your Wasp file or server-side code, make sure to restart your Wasp server to apply the changes. 5. URL Matching: Double-check that the callback URL you've registered with Notion exactly matches the URL in your Wasp application, including the protocol (http/https) and any subdomains. 6. Server Logs: Check your server logs when the redirect happens. There might be error messages that can provide more insight into why the route isn't being recognized. If you've verified all these points and are still experiencing the 404 error, it might be helpful to create a minimal reproducible example of your Wasp application that demonstrates this issue. This would allow the Wasp team to investigate further. Also, consider checking the Github issues for Wasp to see if there are any known issues related to API routing or OAuth callbacks in your version of Wasp (0.16.0). If the problem persists, you might want to reach out to the Wasp team directly through their Discord channel or by opening an issue on GitHub, as this could potentially be a bug in Wasp itself. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sean, 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?

SeanOP•2w ago

hopefully someone will chime in soon, none of the suggestions from AI (the bot or chatgpt) are working.

Killshot•2w ago

hey 404 usually means the page you're reaching is not there.... (server error) i think your api middleware configuration might need changes...

Vinny (@Wasp)•2w ago

sounds like it could be your Notion Auth configuration. What address did you use for the callback url in the notion oauth app you configured? what happens when you do a CURL request to the webhook address:curl -X POST http://localhost:3001/auth/notion/callback ah btw, shouldn't it be a POST request? (cc: @miho)

A³Learn•2w ago

Very funny, i have this exact same problem and it took me days to solve. Vinny added the key code here - it's 3001 not 3000

Vinny (@Wasp)•2w ago

Yeah, that happens a lot. People send the request to their client, not their server.

A³Learn•2w ago

Claude kept on saying it's fine! O3 mini was like uh, it's 3001

Vinny (@Wasp)•2w ago

yeah i like o3 for figuring out problems, and then claude for implemeting the solution

genyus•2w ago

In addition to setting the correct port, I think you also need to double-check your callback URL path in Notion. You said:

After authorizing Notion, it redirects to http://localhost:3000/api/auth/notion/callback?code=03ed839c-59bf-41a9-9d9b-e4a5697e9d03&state=

But you’ve defined your route as:

//#region Notion Integration
api NotionOAuthCallback {
  fn: import { notionOAuthCallback } from "@src/server/notion",
  httpRoute: (GET, "/auth/notion/callback")
}
//#endregion

//#region Notion Integration
api NotionOAuthCallback {
  fn: import { notionOAuthCallback } from "@src/server/notion",
  httpRoute: (GET, "/auth/notion/callback")
}
//#endregion

So the URL should actually be http://localhost:3001/auth/notion/callback

Vinny (@Wasp)•2w ago

good catch

SeanOP•2w ago

thank you all for the help! Indeed i was using the port for the client, not the server and the routes were misaligned.

Vinny (@Wasp)•2w ago

Glad we could help 🙂

Gaming

Programming

APIs keep returning 404 error

Did you find this page helpful?