Sign in

a react app on localhost:5173 plus a payment providers api equals a red console. what am i doing wrong??

apicorsjavascript8 replies · 315 views · started
Reply
  1. Dev R.
    @dev.rahman

    I'm building a React app on localhost:5173 and trying to fetch data from a payment provider's API. postman returns teh data perfectly. the browser gives me this:

    The console says teh request has been blocked by CORS policy, no Access-Control-Allow-Origin header is present. i dont understand why teh same request works in one tool and not the other. Is this something i fix in my code or on the API side?? A plain explanation would honestly help as much as the fix itself. thx in advance!!

    2
  2. Erik Vos
    @buffer_ranger

    are you sending cookies or an Authorization header? ??

    4 0 helpful
  3. Dev R.
    @dev.rahman
    in reply to @buffer_ranger

    Im sending an Authorization header with a token, and credentials include cuz of a session cookie. idk what else to say tbh

    4 0 helpful
  4. Haruto M.
    @haruto_cipher

    @dev.rahman did u ever fix it?.. 🤦 told my boss it would take 10 minutes... its been a whole week

    0 3 helpful
  5. Noah
    @noah_cobalt
    in reply to @haruto_cipher

    yeahhh for your own Express backend, use teh cors middleware before your routes: app.use(cors({ origin: 'https://your-site.example', credentials: true })). Make sure error responses (401, 500) also go through it; otherwise a real server error shows up in the browser as a misleading CORS error. lmk how it goes

    2 0 helpful
  6. Ines Alvarez
    @ialvarez

    hmmm have u checked ur javascript settings? mine were reset after an update

    1 1 helpful
  7. Haruto M.
    @haruto_cipher

    yeahhh honestly just reset teh BIOS and save yourself teh pain lmk how it goes

    0 0 helpful
  8. Rhea Quintero
    @rhea.quintero

    If u send cookies or use credentials: 'include', the server cannot use *. It must echo the exact origin and send Access-Control-Allow-Credentials: true. That's why a wildcard sometimes 'doesn't work'.

    6 0 helpful
  9. Ash Dalton
    @ashd338

    in development, use your dev servers proxy instead of fighting CORS. vite has server.proxy in vite.config.js, so the browesr calls your own origin and teh dev server forwards to the API... in production, configure the real server or a backend proxy teh same way. fingers crossed 🤞

    0 2 helpful

Reply to this topic

Sign in or create an account to reply.