CORS issue on my custom API

I am getting this CORS error on an api call from my chrome extension to my custom wasp api.

Access to fetch at 'http://localhost:3001/api/authUserExtension' from origin 'chrome-extension://bopkjccjbddnmenbconjhiglhbbcniia' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Access to fetch at 'http://localhost:3001/api/authUserExtension' from origin 'chrome-extension://bopkjccjbddnmenbconjhiglhbbcniia' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

main.wasp

api authUserExtension {
  fn: import { authUserExtension } from "@src/server/api/authUserExtension",
  entities: [User],
  httpRoute: (POST, "/api/authUserExtension")
}

main.wasp

api authUserExtension {
  fn: import { authUserExtension } from "@src/server/api/authUserExtension",
  entities: [User],
  httpRoute: (POST, "/api/authUserExtension")
}

12 Replies

kapa.ai•2mo ago

Hi @Sven. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The CORS error you're encountering is due to the browser's security measures, which prevent HTTP requests from being made to a different domain than the one the script came from, unless the server supports it. This is known as the same-origin policy. In Wasp, APIs are designed to be as flexible as possible and 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. Here is an example from the Wasp documentation (https://wasp-lang.dev/docs/advanced/apis#making-sure-cors-works):

// main.wasp
apiNamespace fooBar {  
 middlewareConfigFn: import { fooBarNamespaceMiddlewareFn } from "@src/apis",  
 path: "/foo"  
}  

// src/apis.js
export const apiMiddleware = (config) => {  
 return config;  
};

// main.wasp
apiNamespace fooBar {  
 middlewareConfigFn: import { fooBarNamespaceMiddlewareFn } from "@src/apis",  
 path: "/foo"  
}  

// src/apis.js
export const apiMiddleware = (config) => {  
 return config;  
};

In this example, the default middleware is returned which enables CORS for all APIs under the /foo path. However, in your case, you might need to customize the CORS settings to allow requests from your chrome extension's origin (chrome-extension://bopkjccjbddnmenbconjhiglhbbcniia). You can do this by modifying the middleware for all operations and APIs. Here is an example from the Wasp documentation (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware):

// main.wasp
app todoApp {  
 // ...  
 server: {  
 setupFn: import setup from "@src/serverSetup",  
 middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"  
 },  
}
// src/serverSetup.js
import cors from 'cors'  
import { config } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, 'chrome-extension://bopkjccjbddnmenbconjhiglhbbcniia'] }))  
 return middlewareConfig  
}

// main.wasp
app todoApp {  
 // ...  
 server: {  
 setupFn: import setup from "@src/serverSetup",  
 middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"  
 },  
}
// src/serverSetup.js
import cors from 'cors'  
import { config } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, 'chrome-extension://bopkjccjbddnmenbconjhiglhbbcniia'] }))  
 return middlewareConfig  
}

In this example, the CORS middleware is configured to allow requests from the frontend URL and the chrome extension's origin. Please note that you should replace 'chrome-extension://bopkjccjbddnmenbconjhiglhbbcniia' with the actual origin of your chrome extension. If you still encounter issues, it might be helpful to check the open issues (https://github.com/wasp-lang/wasp/issues/1303) in the Wasp repository for similar problems and potential solutions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sven, 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?

SvenOP•2mo ago

@kapa.ai

 src/server.ts (6:7)
[ Server!] 4: import { config } from 'wasp/server'
[ Server!] 5: 
[ Server!] 6: import setup from '../../../../src/server/serversetup'
[ Server!]           ^
[ Server!] 7: import { ServerSetupFn } from 'wasp/server'
[ Server!] 8: import { ServerSetupFnContext } from 'wasp/server/types'
[ Server!]     at getRollupError (/home/sven/SaaS//app/.wasp/out/server/node_modules/rollup/dist/shared/parseAst.js:282:41)
[ Server!]     at Object.error (/home/sven/SaaS//app/.wasp/out/server/node_modules/rollup/dist/shared/parseAst.js:278:42)
[ Server!]     at Module.error (/home/sven/SaaS//app/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:16291:28)
[ Server!]     at Module.traceVariable (/home/sven/SaaS//app/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:16738:29)
[ Server!]     at ModuleScope.findVariable (/home/sven/SaaS//app/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:14646:39)
[ Server!]     at ReturnValueScope.findVariable (/home/sven/SaaS//app/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:6675:38)
[ Server!]     at FunctionBodyScope.findVariable (/home/sven/SaaS//app/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:6675:38)
[ Server!]     at Identifier.bind (/home/sven/SaaS//app/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:6337:40)
[ Server!]     at CallExpression.bind (/home/sven/SaaS//app

 src/server.ts (6:7)
[ Server!] 4: import { config } from 'wasp/server'
[ Server!] 5: 
[ Server!] 6: import setup from '../../../../src/server/serversetup'
[ Server!]           ^
[ Server!] 7: import { ServerSetupFn } from 'wasp/server'
[ Server!] 8: import { ServerSetupFnContext } from 'wasp/server/types'
[ Server!]     at getRollupError (/home/sven/SaaS//app/.wasp/out/server/node_modules/rollup/dist/shared/parseAst.js:282:41)
[ Server!]     at Object.error (/home/sven/SaaS//app/.wasp/out/server/node_modules/rollup/dist/shared/parseAst.js:278:42)
[ Server!]     at Module.error (/home/sven/SaaS//app/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:16291:28)
[ Server!]     at Module.traceVariable (/home/sven/SaaS//app/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:16738:29)
[ Server!]     at ModuleScope.findVariable (/home/sven/SaaS//app/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:14646:39)
[ Server!]     at ReturnValueScope.findVariable (/home/sven/SaaS//app/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:6675:38)
[ Server!]     at FunctionBodyScope.findVariable (/home/sven/SaaS//app/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:6675:38)
[ Server!]     at Identifier.bind (/home/sven/SaaS//app/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:6337:40)
[ Server!]     at CallExpression.bind (/home/sven/SaaS//app

you dont export setup in the example you gave

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. You're correct, the setup function was not exported in the example provided. The setup function is a part of the server configuration in Wasp and it's used to define custom code that executes on server start. Here's how you can define and export it:

// src/serverSetup.js
export default async function setup() {
  // Your setup code here
}

// src/serverSetup.js
export default async function setup() {
  // Your setup code here
}

Then, you can import it in your main.wasp file:

// main.wasp
app MyApp {
  title: "My app",
  // ...
  server: {
    setupFn: import { setup } from "@src/serverSetup.js",
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup.js"
  }
}

// main.wasp
app MyApp {
  title: "My app",
  // ...
  server: {
    setupFn: import { setup } from "@src/serverSetup.js",
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup.js"
  }
}

Please replace // Your setup code here with the actual setup code you want to run on server start. For more information, you can refer to the Wasp documentation on server setup function (https://wasp-lang.dev/docs/project/server-config#setupfn-extimport). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sven, 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?

SvenOP•2mo ago

@kapa.ai

api authUserExtension {
  fn: import { authUserExtension } from "@src/server/api/authUserExtension",
  entities: [User],
  httpRoute: (POST, "/api/authUserExtension")
}

apiNamespace fff {  
 middlewareConfigFn: import { apimiddleWaree } from "@src/server/api/middleWare",  
 path: "/authUserExtension"  
}

api authUserExtension {
  fn: import { authUserExtension } from "@src/server/api/authUserExtension",
  entities: [User],
  httpRoute: (POST, "/api/authUserExtension")
}

apiNamespace fff {  
 middlewareConfigFn: import { apimiddleWaree } from "@src/server/api/middleWare",  
 path: "/authUserExtension"  
}

i still get Access to fetch at 'http://localhost:3001/api/authUserExtension' from origin 'chrome-extension://bopkjccjbddnmenbconjhiglhbbcniia' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message indicates that the server is not sending the Access-Control-Allow-Origin header in its response, which is required for CORS. This header tells the browser that it's okay for the script from the specified origin to access the resource. In your apiNamespace declaration, you've specified a middlewareConfigFn which should handle the CORS configuration. However, it's not clear from the provided code what the apimiddleWaree function does. Here's an example of how you can set up CORS middleware for your API:

// @src/server/api/middleWare.js
import cors from 'cors'

export const apimiddleWaree = (middlewareConfig) => {
  middlewareConfig.set('cors', cors({ origin: 'chrome-extension://bopkjccjbddnmenbconjhiglhbbcniia' }))
  return middlewareConfig
}

// @src/server/api/middleWare.js
import cors from 'cors'

export const apimiddleWaree = (middlewareConfig) => {
  middlewareConfig.set('cors', cors({ origin: 'chrome-extension://bopkjccjbddnmenbconjhiglhbbcniia' }))
  return middlewareConfig
}

This code sets up CORS middleware to allow requests from the origin chrome-extension://bopkjccjbddnmenbconjhiglhbbcniia. If you're still encountering issues, it might be helpful to check the open issues (https://github.com/wasp-lang/wasp/issues/1303) in the Wasp repository for similar problems and potential solutions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sven, 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?

SvenOP•2mo ago

What am i doing wrong? i still get CORS

import cors from 'cors';

export const apimiddleWaree = (middlewareConfig: any) => {
  // Here, we apply CORS middleware globally, but you can decide not to apply it to specific paths
    middlewareConfig.set('cors', cors({
      origin: '*',  // or specific origins if necessary
      methods: ['GET', 'POST', 'OPTIONS'],
      allowedHeaders: ['Content-Type', 'Authorization'],
    }));
  return middlewareConfig;
};

import cors from 'cors';

export const apimiddleWaree = (middlewareConfig: any) => {
  // Here, we apply CORS middleware globally, but you can decide not to apply it to specific paths
    middlewareConfig.set('cors', cors({
      origin: '*',  // or specific origins if necessary
      methods: ['GET', 'POST', 'OPTIONS'],
      allowedHeaders: ['Content-Type', 'Authorization'],
    }));
  return middlewareConfig;
};

api authUserExtension {
  fn: import { authUserExtension } from "@src/server/api/authUserExtension",
  entities: [User],
  httpRoute: (POST, "/api/authUserExtension"),
  middlewareConfigFn: import { apimiddleWaree } from "@src/server/api/middleWare",
}

api authUserExtension {
  fn: import { authUserExtension } from "@src/server/api/authUserExtension",
  entities: [User],
  httpRoute: (POST, "/api/authUserExtension"),
  middlewareConfigFn: import { apimiddleWaree } from "@src/server/api/middleWare",
}

@kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The CORS configuration and the API declaration seem correct. However, the error message you're seeing indicates that the server is not sending the Access-Control-Allow-Origin header in its response, which is required for CORS. One possible issue could be the order of middleware execution. The CORS middleware should be applied before the routes are defined to ensure that it's executed for every request. Another potential issue could be the use of wildcard (*) in the origin option. This allows requests from any origin, but it might not work as expected with credentials (cookies, HTTP authentication). If your API requires credentials, you should specify the exact origin (chrome-extension://bopkjccjbddnmenbconjhiglhbbcniia) instead of using a wildcard. If you're still encountering issues, it might be helpful to check the open issues (https://github.com/wasp-lang/wasp/issues/1303) in the Wasp repository for similar problems and potential solutions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sven, 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?

SvenOP•2mo ago

annoying issue man why doesnt it work

miho•2mo ago

Read this: https://ptb.discord.com/channels/686873244791210014/1125527267527897188/1277968466082791496

SvenOP•2mo ago

to be honest still dont understand it got it to work no idea why tbh

miho•2mo ago

Did you set up an api + apiMiddleware declarations?

SvenOP•2mo ago

Yes ill show what i did

Gaming

Programming

CORS issue on my custom API