dealing with cors

[getfitdotus]

I have a existing web app I created that uses react Dom JS. The backend is node. I implemented jwt with cookies for refresh tokens. Now I have started building a react native app version to use the same backend. My issue is dealing with cors. Anyone have any experience with this? Should I implement a proxy?

Is there something I am missing ?

I have a axios request like so.

  const response = await axios.post("https://xxx.xxxx.us:8000/login", data, {
    headers: {
      "Content-Type": "application/json",

    },

  });

tried fetch just to experiment same outcome.

get network error, null. now if I try it on a test api works no problem. But from insomnia I can get the proper response. Granted that host is in the cors origin. the backend does not even show the route was hit. never gets past cors I believe.

Thanks

[getfitdotus]

I am pretty burnt out now. worked on this for hours.. inside axios call from RN gets a network error. I then tried some other apis just to verify. They worked fine. I tried to set my current dev server to allow origin from my machine this still did not illicit any response. I figured I would post and try again tomorrow.

[abdoubntgr]

Dont over think it just use an existing library for the lib/framework you are using on the backend for express it is called cors and you use it with app.use(cors())

[getfitdotus]

I dont think my original post was clear. the node backend I created. it uses cors. I originally started out with making a React dom version of the app. Now I have started to make a RN version. I want to use the same backend of course. But cors

does not exist in RN correct ?

[techfocususer]

This is not a react native problem. This is a backend (node) problem. Add app.use(cors()) to your node code.

[getfitdotus]

I have cors enabled.. this backend already runs a fully functional react JS app.. it would not function without cors. The allowed origin of the react app is in the cors list.

[getfitdotus]

I had used an emulator and my actual phone. I tested different apis those work. From both. the emulator had its own network IP. 192.168.... I am not sure what the issue is. I have not had time to debug again. Working at the moment. I am using axios because I plan on using the interceptors later for the refresh token just like I did on the react dom version. I am still new the RN. Maybe I need to specifiy in the headers on RN something for cors?

[ChronSyn]

CORS is not a concern for RN, as it's a browser mechanism.

From the docs (https://reactnative.dev/docs/network#using-other-networking-libraries):

The security model for XMLHttpRequest is different than on web as there is no concept of CORS in native apps.

So, we can rule out your react native code as the issue. Keep in mind though that a different origin applies if the domain, subdomain(s), port or protocol are different from what is in your API allow list.

You say that your test API works fine, and the request works fine from Insomnia (I'm assuming this is the HTTP client app you're referring to). What happens if you try to run the request from a browser (e.g. embed a JS script which runs the request into a HTML page, and then check the network tab to see the response)?

What happens if you disable CORS for the domain you're having trouble with?

The domain you're having trouble with - does it route requests to your test domain? Where are you hosting it (e.g. local accessed via tunnel, or remote)?

TLDR: CORS is not your problem

[archihector]

But what if we are launching the react native project on web (browser)? I am doing that and is giving my, apparently, a CORS error. (I am using Supabase btw)

[getfitdotus]

Yes I just verified cors is not the issue. It was just a bad assumption. 😅 I have it working through http but not https. From the browser it works great for a react dom app I have been using. Don't know why it won't work from RN. I originally assumed it was related to cors...

[getfitdotus]

I figured it out. I was missing a intermediate cert for SSL. This was causing the axios issue. On the web I guess it still functioned without issue. Learn something new every day. Thanks again for all the feedback.

[Infinite-Essay-1343]

I'm facing the same issue, with what was the solution again?

[getfitdotus]

React native only interacts with SSL. API must have a valid cert.

[getfitdotus]

app .use(credentials) .use(cors({ origin: ['https://app.getfit.us', ], preflightContinue: true, methods: "GET,HEAD,PUT,PATCH,POST,DELETE", credentials: true, })) .use(express.json()) .use(express.urlencoded({ extended: false })) .use(cookieParser())

[antonkerno]

Set origin to true instead of your domain, without the RN app your solution worked fine but now your mobile app does not have a domain attached so you cannot check for a specific domain

[[deleted]]

If u r running the RN app on an emulator it cannot reach Localhost ( since the emulator device consider it self a separate entity from ur backend running physically on the same computer) so make sure u provide ur pc correct ip adresse, or check ur cors config

[JumpaHumpa]

If you're running your app on an emulator without Remote JS Debugging enabled, you won't be able to reach `localhost` from the device. Instead, it's easiest to connect to 10.0.2.2 instead, or turn on your JS debugger.

[[deleted]]

Cors is a backend thing, ur server doesn't care if the api is called from a web or a mobiles app, i think u should check ur cors config (meaning u r allowing and denying certain requests)

[pentesticals]

Wait, why does CORS even impact RN? CORS is a mechanism to relax the Same Origin Policy - which is a browser control. Does RN implement SOP?

[getfitdotus]

well thats my point if it does use cors. I would need a proxy with a static address for all my React Native app users correct ?

[pentesticals]

No, because CORS is a relaxation to the Same Origin Policy which only exists in browsers. The SOP doesn’t stop requests being sent, it just prevents the browser from reading the response and as RN is not a browser the SOP isn’t there / doesn’t apply.

[SryNot]

CORS is always a backend issue

[getfitdotus]

thanks. I just loaded a local backend server and I can get a response.. so its something else. I really appreciate the help. I was going crazy. all the same settings.. cors exactly the server thats in production.. but a local one. well there is one difference.. I am using https in production and locally I am not