When I set up HTTPS, do I also need to change React's API endpoint address?

I've created a project with Express, React, and Nginx and am deploying it as an Azure VM.

Below is some code that uses Express' APIs in React (IPv4 addresses have been masked).

const response = await axios.get(`http://XX.XX.XXX.XXX/api/blog/posts/${postId}`,{withCredentials: true,});

I got a domain and wrote the Nginx files as shown below.

/etc/nginx/sites-available/default

server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
server_name XX.XX.XXX.XXX;

location / {
proxy_pass http://localhost:3001;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 300;

}
}

/etc/nginx/sites-available/domain

server {
listen 80;
server_name example.com(my domain);

root /var/www/html;
index index.html index.htm index.nginx-debian.html;
location / {
proxy_pass http://localhost:3001;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

HTTPS will be set up by getting a certificate through certbot.

Once I have HTTPS set up, do I need to modify all the endpoints to https://[mydomain] when calling the backend's API from React?

In fact, I'm having a problem right now: if I access a webpage with an IPv4 address and do something that requires an API call, it works fine, but if I access the webpage with a domain address and do the same thing, it doesn't work properly. I think this is probably related to my problem (because the endpoints I'm using in React are written in IPv4).

I tried modifying the endpoint in React, but there were too many things to modify, so I wanted to see if there was another way to do it first.

Solution

Yes, when you set up HTTPS, you will need to update your React application's API endpoints to use https:// instead of http://. This is important because your site will be served over HTTPS, and mixing HTTP and HTTPS calls (also known as mixed content) can lead to security issues and browser warnings or errors.

To simplify the process of updating your endpoints, you can follow these steps:

Use Environment Variables: Store your API endpoint in an environment variable. This allows you to easily switch between development and production environments without changing your code.

In your React project, you can create a .env file at the root of your project:
```
REACT_APP_API_URL=https://example.com/api
```
Then, use this variable in your code:
```
const response = await axios.get(`${process.env.REACT_APP_API_URL}/blog/posts/${postId}`, { withCredentials: true });
```

Update Nginx Configuration: Ensure your Nginx configuration handles HTTPS properly. After setting up your SSL certificate with Certbot, your Nginx configuration should look something like this:

server {
    listen 80;
    server_name example.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name example.com;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;

    location / {
        proxy_pass http://localhost:3001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

This configuration forces HTTP requests to be redirected to HTTPS and sets up the server to handle HTTPS requests properly.

Use Relative Paths for API Calls: If your React app and API are on the same domain, you can use relative paths for API calls. This way, the protocol (HTTP or HTTPS) will automatically match the one used by your site.
```
const response = await axios.get(`/api/blog/posts/${postId}`, { withCredentials: true });
```
Test Your Setup: After making these changes, deploy your application and test it thoroughly to ensure all API calls work correctly over HTTPS.

By using environment variables and relative paths, you can avoid hardcoding URLs in your React app, making it easier to manage different environments and ensuring smooth transitions between HTTP and HTTPS.