CORS issue

I set up an api endpoint and has an middleware wrap around it to get the cors middleware. I deployed the to the fly.io.
in main.wasp

apiNamespace appsNamespace {
  middlewareConfigFn: import { appsNamespaceMiddlewareFn } from "@src/test/apis",
  path: "/apps"
}

apiNamespace appsNamespace {
  middlewareConfigFn: import { appsNamespaceMiddlewareFn } from "@src/test/apis",
  path: "/apps"
}

export const appsNamespaceMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  const customMiddleware: express.RequestHandler = (_req, _res, next) => {
    console.log(middlewareConfig); // debug purpose
    next()
  }

  middlewareConfig.set('custom.middleware', customMiddleware)

  return middlewareConfig;
};

export const appsNamespaceMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  const customMiddleware: express.RequestHandler = (_req, _res, next) => {
    console.log(middlewareConfig); // debug purpose
    next()
  }

  middlewareConfig.set('custom.middleware', customMiddleware)

  return middlewareConfig;
};

When I tried to hit the endpoint from lovable or

https://cors-test.codehappy.dev/

https://cors-test.codehappy.dev/

, both saying that the endpoint has cors issue. The current workaround I have is manually set up the response header in the fly-server.toml.

  [http_service.http_options.response.headers]
    Access-Control-Allow-Origin = "*"

  [http_service.http_options.response.headers]
    Access-Control-Allow-Origin = "*"

I'm curious about if I did anything wrong to enable cors? or adding that in the response (which seems not that safe) is the only way to go?

CORS issue

I set up an api endpoint and has an middleware wrap around it to get the cors middleware. I deployed the to the fly.io.
in main.wasp

apiNamespace appsNamespace {
  middlewareConfigFn: import { appsNamespaceMiddlewareFn } from "@src/test/apis",
  path: "/apps"
}

apiNamespace appsNamespace {
  middlewareConfigFn: import { appsNamespaceMiddlewareFn } from "@src/test/apis",
  path: "/apps"
}

export const appsNamespaceMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  const customMiddleware: express.RequestHandler = (_req, _res, next) => {
    console.log(middlewareConfig); // debug purpose
    next()
  }

  middlewareConfig.set('custom.middleware', customMiddleware)

  return middlewareConfig;
};

export const appsNamespaceMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  const customMiddleware: express.RequestHandler = (_req, _res, next) => {
    console.log(middlewareConfig); // debug purpose
    next()
  }

  middlewareConfig.set('custom.middleware', customMiddleware)

  return middlewareConfig;
};

When I tried to hit the endpoint from lovable or

https://cors-test.codehappy.dev/

https://cors-test.codehappy.dev/

, both saying that the endpoint has cors issue. The current workaround I have is manually set up the response header in the fly-server.toml.

  [http_service.http_options.response.headers]
    Access-Control-Allow-Origin = "*"

  [http_service.http_options.response.headers]
    Access-Control-Allow-Origin = "*"

I'm curious about if I did anything wrong to enable cors? or adding that in the response (which seems not that safe) is the only way to go?

CORS issue

CORS issue

Continue the conversation

Wasp

Continue the conversation

Wasp

Similar Threads