Wasp•5mo ago

Moving from dev (local) to staging server, access control issues abound

I am getting numerous errors loading the /signup page of the form: [blocked] The page at https://mydomain.com/signup was not allowed to display insecure content from http://localhost:3001/auth/me Then when I go to sign up, further errors of the form: Not allowed to request resource XMLHttpRequest cannot load http://loclhost:3001/auth/me due to access control checks I cannot find any references in the app code to localhost or /auth/me so I assume this is coming from the wasp framework. I've configured an extremely permissive cors middleware: ----- import cors from 'cors'; export const corsMiddleware = cors({ origin: true, // Allow any origin credentials: true, }); ----- I note that there is only one endpoint in the main.wasp that specifies a middlewareConfigFn, and that is our Stripe webhook. What could be the issue @kapa.ai

6 Replies

kapa.ai•5mo ago

Hi @Conspyre. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing seems to be related to Cross-Origin Resource Sharing (CORS) and the way your application is configured. When moving from local development to a staging server, you need to ensure that your application is correctly configured to handle requests from different origins. In Wasp, you can customize the middleware for your APIs to handle CORS. You've already defined a very permissive CORS middleware, but you need to make sure it's applied to all your APIs. This can be done by defining a middlewareConfigFn on an apiNamespace or on a global level for all operations and APIs. Here's an example of how to apply middleware to an apiNamespace:

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

// src/apis.js
export const fooBarNamespaceMiddlewareFn = (middlewareConfig) => {  
 middlewareConfig.set('custom.middleware', corsMiddleware)  
 return middlewareConfig  
}

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

// src/apis.js
export const fooBarNamespaceMiddlewareFn = (middlewareConfig) => {  
 middlewareConfig.set('custom.middleware', corsMiddleware)  
 return middlewareConfig  
}

Source (https://wasp-lang.dev/docs/advanced/middleware-config#3-customize-per-path-middleware) And here's an example of how to apply middleware globally:

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

// src/serverSetup.js
export const serverMiddlewareFn = (middlewareConfig) => {  
 middlewareConfig.set('cors', corsMiddleware)  
 return middlewareConfig  
}

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

// src/serverSetup.js
export const serverMiddlewareFn = (middlewareConfig) => {  
 middlewareConfig.set('cors', corsMiddleware)  
 return middlewareConfig  
}

Source (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware) Also, ensure that your client is correctly configured to make requests to your server's domain and not localhost. This is usually done by setting the REACT_APP_API_URL environment variable to your server's URL. This was mentioned in a Discord thread (https://discord.com/channels/686873244791210014/1218081390176763914) where users were discussing similar issues. If you're still experiencing issues, it might be helpful to check out the Wasp documentation on CORS (https://wasp-lang.dev/docs/advanced/apis#making-sure-cors-works) and Middleware Configuration (https://wasp-lang.dev/docs/advanced/middleware-config). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Conspyre, 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?

ConspyreOP•5mo ago

@kapa.ai in that solution for the src/serverSetup.js code, that is giving a wasp compilation error: [ Server!] [!] RollupError: src/server.ts (6:7): "default" is not exported by "../../../src/serverSetup.js", imported by "src/server.ts". [ Server!] https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module [ Server!] src/server.ts (6:7) [ Server!] 4: import { config } from 'wasp/server' [ Server!] 5: [ Server!] 6: import setup from '../../../../src/serverSetup' [ Server!] ^ [ Server!] 7: import { ServerSetupFn } from 'wasp/server' [ Server!] 8: import { ServerSetupFnContext } from 'wasp/server/types' [ Server!] at getRollupError (/home/ubuntu/truthcraft/.wasp/out/server/node_modules/rollup/dist/shared/parseAst.js:282:41) [ Server!] at Object.error (/home/ubuntu/truthcraft/.wasp/out/server/node_modules/rollup/dist/shared/parseAst.js:278:42) [ Server!] at Module.error (/home/ubuntu/truthcraft/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:15418:28) [ Server!] at Module.traceVariable (/home/ubuntu/truthcraft/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:15866:29) [ Server!] at ModuleScope.findVariable (/home/ubuntu/truthcraft/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:13575:39) [ Server!] at ReturnValueScope.findVariable (/home/ubuntu/truthcraft/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:8921:38) [ Server!] at FunctionBodyScope.findVariable (/home/ubuntu/truthcraft/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:8921:38) [ Server!] at Identifier.bind (/home/ubuntu/truthcraft/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:8407:40) [ Server!] at CallExpression.bind (/home/ubuntu/truthcraft/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:6276:23) [ Server!] at CallExpression.bind (/home/ubuntu/truthcraft/.wasp/out/server/node_modules/rollup/dist/shared/rollup.js:10678:15)

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message you're seeing is due to the way you're trying to import the setup function from your serverSetup.js file. The error message is indicating that there is no default export in your serverSetup.js file. In JavaScript, there are two types of exports: named exports and default exports. You can have multiple named exports in a module but only one default export. When you import a default export, you don't need to use curly braces {}. In your case, it seems like you're trying to import a default export (import setup from '../../../../src/serverSetup'), but your serverSetup.js file doesn't have a default export. To fix this, you can either change your import statement to import a named export or change your export statement to a default export. If you want to keep using a named export, your import statement should look like this:

import { setup } from '../../../../src/serverSetup'

import { setup } from '../../../../src/serverSetup'

And your serverSetup.js file should have a named export like this:

export const setup = ...

export const setup = ...

If you want to use a default export, your import statement can stay the same:

import setup from '../../../../src/serverSetup'

import setup from '../../../../src/serverSetup'

And your serverSetup.js file should have a default export like this:

export default setup

export default setup

Please check your serverSetup.js file and make sure your exports and imports match. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Conspyre, 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?

ConspyreOP•5mo ago

@kapa-ai you provided an incomplete example: ------------------------------------------------ And here's an example of how to apply middleware globally: // main.wasp app todoApp {
// ...
server: {
setupFn: import setup from "@src/serverSetup",
middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
},
}
// src/serverSetup.js export const serverMiddlewareFn = (middlewareConfig) => {
middlewareConfig.set('cors', corsMiddleware)
return middlewareConfig
}
------------------------------------------------------ In the setupFn we import "setup" from @src/serverSetup Then you provided a src/serverSetup.js which does not have a "setup" export. Explain. looking for the fine manual……… @kapa.ai the cors issue is resolved :be:

MEE6•5mo ago

Wohooo @Conspyre, you just became a Waspeteer level 2!

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm glad to hear that your CORS issue is resolved! If you have any more questions or run into any other issues, feel free to ask. Happy coding with Wasp! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Conspyre, 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?

Gaming

Programming

Moving from dev (local) to staging server, access control issues abound