Search code examples
javareactjsspringsslcloudflare

When I set up SSL/TLS in React and Spring using CloudFlare, no axios requests are made from React to Spring

It's a bit long, but I've listed all the situations to make it specific to the situation I'm in, and I hope you understand...

I installed react and spring on a Linux Ubuntu server and separated the frontend from the backend. I'm using axios to communicate with react when I need to make specific requests.

I also installed and used Nginx to deploy the react application. When I enter the ip address from an external PC, it enters normally.

I purchased a domain called isakgo.com from CloudFlare and registered it with DNS Records. Now, when I type in isakgo.com and enter it, I get to the webpage fine.

The problem occurred while setting up HTTPS. In CloudFlare, I set Full (strict) in SSL/TLS, enabled Always Use Https, and generated an 'Origin Certificate' and 'Private Key' via Create Certificate in CloudFlare.

I moved these keys into the /etc/ssl folder on Linux. I named the Origin Certificate isakgo.com.pem and the Private Key isakgo.com.key.

Next, I set the sites-available/default file in Nginx to the following.

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

server {
    listen 443 ssl;
    server_name isakgo.com;

    ssl_certificate /etc/ssl/isakgo.com.pem;
    ssl_certificate_key /etc/ssl/isakgo.com.key;

    location / {
        root /root/front_react/my-app/build/;
        try_files $uri /index.html;
    }
}

Restart Nginx and go to isakgo.com, and you will automatically be directed to https://isakgo.com.

Now that we're on https when accessing our react application, it's time to set spring to https. I proceeded as follows

Using the isakgo.com.pem and isakgo.com.key that we created in CloudFlare earlier, I created a keystore in pkcs12 format because spring doesn't recognize the pem format. I executed the following command to create it.

openssl pkcs12 -export -inkey isakgo.com.key -in isakgo.com.pem -out keystore.p12 -name jspSpring

Now I moved the file named keystore.p12 inside src/main/resources, which is the path corresponding to classpath: in spring. Then I opened application.yml with vim and modified it like this

server:
  port: 8443
  ssl:
    enabled: true
    key-store: classpath:keystore.p12
    key-store-password: my-password
    key-store-type: PKCS12
    key-alias: jspSpring

That's it, we have built the spring project with ./gradlew build command and executed that spring project with java -jar command (using built-in Tomcat).

Now, press a specific button on the react server (isakgo.com) to send an axios.post request to spring with the following format.

await axios.post("https://isakgo.com/api/processLogin");

/api/precessLogin is the endpoint that is associated with the @PostMapping annotation in spring.

However, we get the following error here.

xhr.js:251 POST https://My-IP:8443/api/processLoginnet::ERR_CERT_AUTHORITY_INVALID

It says it's invalid, but I'm not sure where I made a mistake - I'm guessing it's the openssl part, but that's not quite right.

Also, to try another way around it, I tried using Let's Encrypt instead of using the .pem and .key issued by CloudFlare. With that, after modifying the Nginx config file appropriately, I get the following error when I run it.

POST https://My-IP:8443/api/processLogin net::ERR_CERT_COMMON_NAME_INVALID

My guess is that the above issue is caused by using CloudFlare and using Certbot at the same time. I'm not sure how to resolve this issue.

Does anyone know of a way to resolve this issue, while still utilizing CloudFlare?

Solution

  • I don't see any issue with your configuration and PKCS12 file. Also, I have verified your service URL (https://isakgo.com:8443/api/processLogin) which seems ok. Can you please confirm whether you can access the URL in the same browser, and it shows secure in your browser.