Can I add an App Transport Security Exception in Expo or do I need to address SSL issues?

[python123]

Hey there, I am having some trouble getting fetch to work from the qr code iOS simulator. I believe this is because my server originally was using http instead of https. From what I read from the documentation, it seems that I need to add an App Transport Security exception to my project. However, all fixes that I have seen so far on stack overflow and other resources seem to have ejected the project or are old fixes that I can not get to work. I’m fairly convinced this is the problem with this way of doing it as postman and the local host url seem to display my sample data just fine. I would not like to eject the project at this stage, but this seems to be the only way of adding this exception.

The alternative solution I see is to change my backend server from http to https. I believe I found a way to do this from this medium post. However, I am running into some trouble with this solution as my server seems to only have a self signed certificate, which I think is causing fetch in react native to not work as well. Again I think this is the issue because on postman and my the local host url it seems to work (although in both cases I have to bypass a warning - I believe this comes from the fact that there is no certificate for the https version of the server). I saw on some previous posts in these forums

I’m wondering which way to go is better. I think the https route is the way to go, especially in the long term (like for a production build), but I am not 100% sure that what I did in the medium article is right/safe. I also am not sure how to get a certificate. I believe @wodin provided a similar answer here, but again I am not sure if I should go down this route with Let’s Encrypt (or some other tool). I’m fairly new to building a backend from scratch and using expressjs, so looking for some confirmation/advice that what I am doing is correct.

[python123]

Figured out a nice and easy fix, credit goes to the reactiflux discord for the proposed solution.

Use this tool called ngrok, especially for testing locally. Basically, it creates a tunnel that is forwarded to your local host (you can specify the port). So, you get a temporary (in the sense that it will change with each time you run ngrok) url that is both http and https. Pretty sweet solution if you want to avoid hosting right away. Resulted in pretty much no change to my express server.

I recommend following these three steps here. With step 3, make sure to use whatever port number you are using for your express server. Then when ngrok runs in your terminal you should see something like this:

If you use the free version I’m pretty sure you won’t get katesapp.ngrok.io, but likely some random io. The good news is that if you go to either the http or https version of the url forwarded to your local host it will work, thus this solves the issue of fetch in react native (without ejecting out of expo).

Also, I believe you have to start up your express server prior to running ngrok, otherwise I do not think the forwarding will work (could be wrong here).

The only annoying thing is that you will need to update the url everytime for your fetches in react native. My suggestion is to use a constant var that is reused in all files, so that way you only have to change it once.

Additionally, you may need to open the link of ngrok on your iphone if you are using the qr-code iOS simulator like I am.

Hope that saves someone a day of googling.