Wasp•4mo 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.

14 Replies

kapa.ai•4mo 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•4mo 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•4mo 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•4mo 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•4mo 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•4mo ago

got this working with that middleware

Sven•3mo ago

@kapa.ai where do i find that middleware file in order to apply this also to my case

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To apply the middleware configuration to your Wasp project, you need to create or modify the server setup file. Here's how you can find or create this file: 1. In your Wasp project directory, look for a file named src/server/serverSetup.ts (for TypeScript) or src/server/serverSetup.js (for JavaScript). 2. If this file doesn't exist, you can create it yourself. 3. Once you have this file, you need to declare it in your main.wasp file. Add the following configuration to your app declaration:

app MyApp {
  // ... other configurations ...
  server: {
    setupFn: import { serverMiddlewareFn } from "@src/server/serverSetup.js",
  }
}

app MyApp {
  // ... other configurations ...
  server: {
    setupFn: import { serverMiddlewareFn } from "@src/server/serverSetup.js",
  }
}

Note that the import path in the main.wasp file should use the .js extension even if you're using TypeScript. 4. In your serverSetup.ts or serverSetup.js file, you can then add the middleware configuration we discussed earlier:

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

export const serverMiddlewareFn: MiddlewareConfigFn = (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 } from 'wasp/server'

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

This setup is based on the information provided in the Wasp Middleware Configuration Docs (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware) and the Wasp Server Config API Reference (https://wasp-lang.dev/docs/project/server-config#api-reference). Remember to install the necessary dependencies (cors and @types/cors for TypeScript) if you haven't already. After making these changes, restart your Wasp server for the changes to take effect. ---------------------- 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?

Sven•3mo ago

how did u fix it

wardboxOP•3mo ago

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

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

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

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

this was my final code, not sure both are required there, it might just need the www one. docs for it are here https://wasp-lang.dev/docs/project/server-config#middleware-config-function

Server Config | Wasp

You can configure the behavior of the server via the server field of app declaration:

Sven•3mo ago

thanks but what did u put in main.wasp etc

wardboxOP•3mo ago

  server: {
    middlewareConfigFn: import { serverMiddleWareFn } from "@src/serverSetup",
  },

  server: {
    middlewareConfigFn: import { serverMiddleWareFn } from "@src/serverSetup",
  },

Sven•3mo ago

letssee if this works last things ive tried didnt work

Filip•3mo ago

@wardbox Thanks for jumping in. @Sven The links provided by the bot and wardbox should give you all the answers you need.

Gaming

Programming

CORS is blocking www

Did you find this page helpful?