Wasp-lang•3w ago

CORS is blocking www

www.dylankappler.com/:1 Access to XMLHttpRequest at 'https://devsite-server.fly.dev/operations/get-version' from origin 'https://www.dylankappler.com' 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. when accessing my site at www i get this cors error.

6 Replies

kapa.ai•3w ago

Hi @wardbox. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your CORS issue when accessing your site at www.dylankappler.com, you need to ensure that your server is configured to allow requests from this domain. Based on the information provided in the knowledge sources, here are a few steps you can take to resolve this: 1. Update CORS configuration: You need to modify the CORS settings on your server to include <https://www.dylankappler.com> as an allowed origin. This can be done by updating the WASP_WEB_CLIENT_URL environment variable for your server app on Fly.io. Run the following command:

   wasp deploy fly cmd --context server secrets set WASP_WEB_CLIENT_URL=<https://www.dylankappler.com>

   wasp deploy fly cmd --context server secrets set WASP_WEB_CLIENT_URL=<https://www.dylankappler.com>

Wasp CLI Deployment Docs (https://wasp-lang.dev/docs/advanced/deployment/cli#using-a-custom-domain-for-your-app) 2. Customize global middleware: If the above step doesn't resolve the issue, you may need to customize the global middleware to explicitly allow your domain. You can do this by modifying the serverMiddlewareFn in your Wasp project:

   import cors from 'cors'
   import { config } from 'wasp/server'

   export const serverMiddlewareFn = (middlewareConfig) => {
     middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://www.dylankappler.com']> }))
     return middlewareConfig
   }

   import cors from 'cors'
   import { config } from 'wasp/server'

   export const serverMiddlewareFn = (middlewareConfig) => {
     middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://www.dylankappler.com']> }))
     return middlewareConfig
   }

Wasp Middleware Configuration Docs (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware) 3. Verify DNS settings: Ensure that your DNS settings are correctly configured for both the root domain and the www subdomain. You may need to add appropriate A and AAAA records for your custom domain as instructed by Fly.io when you set up your custom domain. Wasp CLI Deployment Docs (https://wasp-lang.dev/docs/advanced/deployment/cli#using-a-custom-domain-for-your-app) 4. Update Wasp version: If you're still experiencing issues, consider updating to the latest version of Wasp, as recent updates may have addressed CORS-related issues:

   curl -sSL <https://get.wasp-lang.dev/installer.sh> | sh

   curl -sSL <https://get.wasp-lang.dev/installer.sh> | sh

Then update the Wasp version in your main.wasp file:

   wasp: {
     version: "^0.11.8"
   },

   wasp: {
     version: "^0.11.8"
   },

Discord Support Thread (https://discord.com/channels/686873244791210014/1201898985300971540) After making these changes, redeploy your application using wasp deploy fly deploy. If you continue to experience CORS issues, you may need to further investigate your server configuration or consult the Wasp documentation for more advanced CORS settings. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @wardbox, 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?

wardboxOP•3w ago

but i already have WASP_WEB_CLIENT_URL set to https://dylankappler.com/, won't that override this? @kapa.ai

Dylan Kappler

Making computers go brrrrrrrrrrrrrrrrrr

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're correct to be concerned about the potential conflict. Let's clarify this situation: 1. Current setting: You mentioned that you already have WASP_WEB_CLIENT_URL set to <https://dylankappler.com/.> This is indeed the root cause of your CORS issue when accessing from www.dylankappler.com. 2. CORS behavior: The server is currently configured to allow requests only from <https://dylankappler.com/,> which is why you're getting CORS errors when accessing from www.dylankappler.com. To resolve this, you have a couple of options: 1. Update WASP_WEB_CLIENT_URL: Instead of overriding, you should update the WASP_WEB_CLIENT_URL to include both domains. You can do this by running:

   wasp deploy fly cmd --context server secrets set WASP_WEB_CLIENT_URL=<https://dylankappler.com,https://www.dylankappler.com>

   wasp deploy fly cmd --context server secrets set WASP_WEB_CLIENT_URL=<https://dylankappler.com,https://www.dylankappler.com>

This will allow both the root domain and the www subdomain. Wasp CLI Deployment Docs (https://wasp-lang.dev/docs/advanced/deployment/cli#using-a-custom-domain-for-your-app) 2. Customize middleware: If you need more fine-grained control, you can customize the CORS middleware as mentioned in my previous answer. This approach allows you to specify multiple origins:

   import cors from 'cors'
   import { config } from 'wasp/server'

   export const serverMiddlewareFn = (middlewareConfig) => {
     middlewareConfig.set('cors', cors({ 
       origin: [config.frontendUrl, '<https://dylankappler.com',> '<https://www.dylankappler.com']> 
     }))
     return middlewareConfig
   }

   import cors from 'cors'
   import { config } from 'wasp/server'

   export const serverMiddlewareFn = (middlewareConfig) => {
     middlewareConfig.set('cors', cors({ 
       origin: [config.frontendUrl, '<https://dylankappler.com',> '<https://www.dylankappler.com']> 
     }))
     return middlewareConfig
   }

Wasp Middleware Configuration Docs (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware) Remember to redeploy your application after making these changes. This should allow your server to accept requests from both <https://dylankappler.com> and <https://www.dylankappler.com,> resolving your CORS issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @wardbox, 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?

wardboxOP•3w ago

[ Wasp ] ext-src/serverSetup.ts(1,18): error TS2307: Cannot find module 'cors' or its corresponding type declarations. [ Wasp ] ext-src/serverSetup.ts(4,54): error TS2304: Cannot find name 'MiddlewareConfig'. @kapa.ai

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- These errors suggest that you're missing some necessary type declarations and imports in your serverSetup.ts file. Let's address these issues step by step: 1. For the "Cannot find module 'cors'" error: You need to install the @types/cors package to provide TypeScript type declarations for the cors module. Run the following command in your project directory:

   npm install --save-dev @types/cors

   npm install --save-dev @types/cors

2. For the "Cannot find name 'MiddlewareConfig'" error: This type should be imported from the Wasp server module. Update your import statement at the top of your serverSetup.ts file to include the MiddlewareConfig type:

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

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

Here's an example of how your serverSetup.ts file should look after these changes:

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

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig: MiddlewareConfig) => {
  middlewareConfig.set('cors', cors({ 
    origin: [config.frontendUrl, '<https://dylankappler.com',> '<https://www.dylankappler.com']> 
  }))
  return middlewareConfig
}

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

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig: MiddlewareConfig) => {
  middlewareConfig.set('cors', cors({ 
    origin: [config.frontendUrl, '<https://dylankappler.com',> '<https://www.dylankappler.com']> 
  }))
  return middlewareConfig
}

This structure follows the example provided in the Wasp Middleware Configuration Docs (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware). After making these changes, try running wasp start again. If you still encounter issues, you may need to run wasp clean before starting the app to ensure all dependencies are properly rebuilt. Remember, when working with TypeScript in Wasp, it's important to use the correct type imports from the Wasp server module to ensure type safety and avoid these kinds of errors. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @wardbox, 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?

wardboxOP•3w ago

got this working with that middleware

Gaming

Programming

CORS is blocking www