Wasp•4d ago

CORS issue

@kapa.ai i'm experiencing a CORS issue: Access to XMLHttpRequest at 'https://api.elmossetgourmet.es/auth/me' from origin 'https://elmossetgourmet.es' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.Understand this errorAI api.elmossetgourmet.es/auth/me:1

Failed to load resource: net::ERR_FAILEDUnderstand this errorAI /checkout:1 Access to XMLHttpRequest at 'https://api.elmossetgourmet.es/operations/create-stripe-checkout-session' from origin 'https://elmossetgourmet.es' 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.Understand this errorAI index-C393RbYu.js:169 Error al procesar el pago: At {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …} g @ index-C393RbYu.js:169 await in g Oe @ index-C393RbYu.js:37 Ge @ index-C393RbYu.js:37 ct @ index-C393RbYu.js:37 S1 @ index-C393RbYu.js:37 A1 @ index-C393RbYu.js:37 (anonymous) @ index-C393RbYu.js:37 Sf @ index-C393RbYu.js:40 Ta @ index-C393RbYu.js:37 kh @ index-C393RbYu.js:37 nh @ index-C393RbYu.js:37 f4 @ index-C393RbYu.js:37Understand this errorAI index-C393RbYu.js:78

POST https://api.elmossetgourmet.es/operations/create-stripe-checkout-session net::ERR_FAILED My middleware.ts:

import type { Application } from 'express'
import cors from 'cors'

export const configureMiddleware = (app: Application) => {
  // Habilitar CORS para todas las solicitudes
  app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'https://elmossetgourmet.es')
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization')
    res.header('Access-Control-Allow-Credentials', 'true')

    // Manejar solicitudes preflight OPTIONS
    if (req.method === 'OPTIONS') {
      return res.status(200).send()
    }
    next()
  })

  // Configuración específica para rutas de autenticación
  app.use('/auth/*', (req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'https://elmossetgourmet.es')
    res.header('Access-Control-Allow-Credentials', 'true')
    next()
  })

  // Configuración específica para rutas de operaciones (incluyendo Stripe)
  app.use('/operations/*', (req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'https://elmossetgourmet.es')
    res.header('Access-Control-Allow-Credentials', 'true')
    next()
  })

  // Middleware de CORS general como respaldo
  app.use(cors({
    origin: 'https://elmossetgourmet.es',
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'Accept', 'Origin'],
    preflightContinue: false,
    optionsSuccessStatus: 204
  }))
}

3 Replies

kapa.ai•4d ago

Hi @NEROX. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources and your question, it appears you're experiencing a CORS (Cross-Origin Resource Sharing) issue with your Wasp application. Let's address this problem step by step: 1. CORS Configuration in Wasp: Wasp provides built-in CORS support, but it seems your custom configuration is not working as expected. According to the Wasp documentation on configuring middleware (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware), you can customize the global middleware to modify CORS settings. 2. Suggested Solution: Instead of creating a separate middleware.ts file, try modifying the CORS configuration directly in your Wasp project. Here's how you can do it: In your main.wasp file, add the following:

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

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

Then, create a serverSetup.js (or .ts if you're using TypeScript) file in your src directory:

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

export const serverMiddlewareFn = (middlewareConfig) => {
  middlewareConfig.set('cors', cors({
    origin: '<https://elmossetgourmet.es',>
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'Accept', 'Origin'],
  }))
  return middlewareConfig
}

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

export const serverMiddlewareFn = (middlewareConfig) => {
  middlewareConfig.set('cors', cors({
    origin: '<https://elmossetgourmet.es',>
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'Accept', 'Origin'],
  }))
  return middlewareConfig
}

This configuration should allow requests from <https://elmossetgourmet.es> and set the necessary CORS headers. 3. Additional Considerations: - Make sure your server is actually running on <https://api.elmossetgourmet.es.> The CORS configuration needs to be applied on the server that's receiving the requests. - If you're using custom API endpoints, you might need to apply CORS configuration to them specifically. See the Wasp documentation on making sure CORS works for APIs (https://wasp-lang.dev/docs/advanced/apis#making-sure-cors-works) for more details. 4. Preflight Requests: Your error message mentions a preflight request issue. The configuration above should handle OPTIONS requests, but if you're still having issues, you might need to explicitly handle preflight requests in your API implementations. If these steps don't resolve your issue, it's possible that there's a more complex configuration needed or there might be other factors at play. In that case, you might want to reach out to the Wasp community on their Discord channel (https://discord.gg/rzdnErX) for more specific help. Remember, CORS is a security feature implemented by browsers, so it's crucial to configure it correctly to allow only the necessary origins while maintaining security. Wasp Docs: Configuring Middleware (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware) Wasp Docs: Making Sure CORS Works for APIs (https://wasp-lang.dev/docs/advanced/apis#making-sure-cors-works) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•4d ago

Thx Kapa!

Filip•3d ago

Great to see the bot's doing its job

Gaming

Programming

CORS issue