Sign in

CORS ERROR ONLY IN PRODUCTION FOR A REACT APP ON LOCALHOST:5173. LOCALHOST WAS FINE

apicorsjavascript12 replies · 295 views · started
Reply
  1. Uma Park
    @uma_uplink

    help!! day two of fihgting CORS, a React app on localhost:5173 calls a form-handling service, and every reqeust dies with a CORS error.

    This app can't run on your PC

    This app can't run on your PC

To find a version for your PC, check with the
software publisher.

    ive tried adding headers to my fetch call, setting mode to no-cors, and installing a browser extension that disables CORS. the extension works but obviously i cant ask users to install it. whats the actual correct setup here? id really like to understand teh proper way instead of hacking around it. any ideas??

    facepalm

    14
  2. Cyrus Adler
    @tiny_deck

    lol same thing happened to me for your own Express backend, use the cors middleware before ur routes: app.use(cors({ origin: 'https://your-site.example', credentials: true })). Make suree error responses (401, 500) also go thruogh it; otherwise a real server error shows up in the browser as a misleading CORS error. fingers crossed 🤞

    0 3 helpful
  3. Soren K.
    @soren_solid

    nah tbh idk man that sounds like bad advice tbh

    1 0 helpful
  4. Arjun N.
    @kernel_ranger

    oh ive been there lol this. sooo much this lmk how it goes

    25 0 helpful
  5. Kenji
    @kekstrom-2rb

    any update on this? ??

    0 1 helpful
  6. Wren Nakamura
    @heapforge

    oh ive been there lol if you send cookies or use credentials: 'include', the server cannot use *. It must echo the exact origin and send Access-Control-Allow-Credentials: true. Thats why a wildcard sometimes doesnt work.

    0 1 helpful
  8. Freya L.
    @tensor_tinker

    oof some APIs, especially payment providers, are intentionally not callable from teh borwser with secret keys 😅 Calling them from frontend code would expose your secret. Make the call from ur own backend or a serverless function and let your frontend talk to that.

    0 1 helpful
  9. Cyrus Adler
    @tiny_deck

    came here to say exactly this hope that helps :)

    2 1 helpful
  10. Dario L.
    @dario_vector

    oof requests with Authorization headers or Content-Type: application/json trigger a preflight OPTIONS request. The server must respond to it with a 2xx status plus Access-Control-Allow-Methods and Access-Control-Allow-Headers listing what u send. many servers return 404 or 401 to OPTIONS, which fails the whole thing. hope that helps :)

    2 2 helpful
  12. Soren K.
    @soren_solid

    omg finally ok update: did what @tiny_deck said and its fine now

    2 2 helpful
  13. Uma Park
    @uma_uplink
    in reply to @dario_vector

    @dario_vector omggg added an OPTIONS handler and teh cors middlewrae before my routes... a React app on localhost:5173 talks to teh API now. Finally understand what preflight is. thank u thank u thank u

    0 1 helpful

Reply to this topic

Sign in or create an account to reply.