0

I have my front end ReactJS application, which calls AWS EC2 instance. This EC2 instance is running a Spring boot Jar file, which has simple GET request end point. But, when i run my reactjs application, which uses fetch api to get details from aws ec2 instance uri, it is throwing below error:

"Access to fetch at 'http://ec2-3-145-165-206.us-east-2.compute.amazonaws.com:8080/searchAll' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

But if i run the same aws url in Postman or browser, it just works fine. http://ec2-3-145-165-206.us-east-2.compute.amazonaws.com:8080/searchAll

ReactJS code:

async function fetchTableData() {
        setLoading(true)
            
        const URL = "http://ec2-3-145-165-206.us-east-2.compute.amazonaws.com:8080/searchAll"
        const response = await fetch(URL)

        const users = await response.json()
        setData(users)
        setLoading(false)
    }

Could someone please tell me, what is wrong here not working from ReactJS app?

Stella
  • 1,728
  • 5
  • 41
  • 95
  • U need to set this up from your server side meaning u need to modify some code from EC2 instance. This might help https://stackoverflow.com/questions/39835982/where-to-add-cors-headers-in-aws-ec2 – Milan Patel Jun 27 '23 at 06:30
  • Hi @MilanPatel Could you pls tell me how to setup this on EC2 instance? I didn't get it exactly from the above link. I didn't see any option at EC2 instance settings area to add Access-Control-Allow-Origin: * – Stella Jun 27 '23 at 13:48
  • Hi @MilanPatel I have tried this same ReactJS app hosted on same AWS account "Amplify". I have public url for react app. But still this app is also not fetching the data from EC2 spring boot service.This react app is not localhost right? In this way of running ReactJS (deployed from Amplify), i get some other error like this - Mixed Content: The page at 'master.dw1qlg7lxrxk.amplifyapp.com' was loaded over HTTPS, but requested an insecure resource 'ec2-3-145-165-206.us-east-2.compute.amazonaws.com:8080/…'. This request has been blocked; the content must be served over HTTPS. – – Stella Jun 27 '23 at 14:39
  • basically this is how this application works. 1.) ReactJS Front end App (Tested localhost or Deployed in AWS Amplify) -> calls EC2 instance public url. 2.) EC2 instance is running a Spring boot service with "searchAll" GET end point, that calls intern AWS RDS MySQL db to fetch data and give back). I tested separately, Spring boot service which running on EC2 that fetches DB from AWS RDS MySQL works fine. This error comes only when ReactJS (running on localhost or hosted in AWS Amplify) calling – Stella Jun 27 '23 at 14:40
  • Thanks. got it fixed – Stella Jun 27 '23 at 17:54

1 Answers1

1

You need to setup CORS response headers on the EC2 instance so the React app can connect to that destination, see here for the instructions of the headers you have to send back: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Ie. a quick fix would be to add a response headers from the EC2 application:

Access-Control-Allow-Origin: *

Preferably you would lock it down to the hosts that can connect to the EC2 instance instead of just using *.

In addition you are referring to the EC2 instance through its public DNS name this is connected to the IP address of the machine. If you are not using an Elastic IP this DNS name will change when the machine changes underlying hosts (or gets stopped and started with some time between it).

alex
  • 240
  • 6
  • Thanks @Alex. Could you pls tell me how to setup this on EC2 instance? I didn't see any option at EC2 instance settings area to add Access-Control-Allow-Origin: * – Stella Jun 27 '23 at 13:36
  • Hi! This is a response header you need to setup in the application (not on the EC2 instance itself, but on the searchAll function so to say). So on this page: http://ec2-3-145-165-206.us-east-2.compute.amazonaws.com:8080/searchAll if this uses PHP for instance to make the search function, it must also return the Access-Control-Allow-Origin header with its response. – alex Jun 27 '23 at 14:07
  • Ok, basically this is how this application works. 1.) ReactJS Front end App (Tested localhost or Deployed in AWS Amplify) -> calls EC2 instance public url. 2.) EC2 instance is running a Spring boot service with "searchAll" GET end point, that calls intern AWS RDS MySQL db to fetch data and give back). I tested separately, Spring boot service which running on EC2 that fetches DB from AWS RDS MySQL works fine. This error comes only when ReactJS (running on localhost or hosted in AWS Amplify) calling. – Stella Jun 27 '23 at 14:14
  • Based on your above comment, Should I set this in my Spring boot service response header? Because, As I said above, Spring boot service which runs on AWS EC2 instance. – Stella Jun 27 '23 at 14:19
  • Hi Alex, I have tried this same ReactJS app hosted on same AWS account "Amplify". I have public url for react app. But still this app is also not fetching the data from EC2 spring boot service.This react app is not localhost right? In this way of running ReactJS (deployed from Amplify), i get some other error like this - Mixed Content: The page at 'https://master.dw1qlg7lxrxk.amplifyapp.com/' was loaded over HTTPS, but requested an insecure resource 'http://ec2-3-145-165-206.us-east-2.compute.amazonaws.com:8080/searchAll'. This request has been blocked; the content must be served over HTTPS. – Stella Jun 27 '23 at 14:33
  • Yes correct, you must change the Spring Boot application to add the response header Access-Control-Allow-Origin: *. Here are some instructions on how to do just that: https://spring.io/guides/gs/rest-service-cors/ (after that, the React app should be able to post to the spring boot application). Also the other error pertains to having mixed content (SSL). For this, can you make a new question and I can help you there! Because it involves multiple steps. – alex Jun 27 '23 at 14:49
  • Hi Alex, please see my other question here: https://stackoverflow.com/questions/76566480/mixed-content-error-between-reactjs-on-aws-amplify-and-spring-boot-service-on-ec – Stella Jun 27 '23 at 15:33
  • I tried adding @CrossOrigin(origins = "*") just below @GetMapping("/searchAll") end point in Spring boot service. Does this enough to build this spring boot service to accept cross origin header? – Stella Jun 27 '23 at 17:20
  • Yes that should work – alex Jun 27 '23 at 17:30
  • Ok, this has worked when running reactjs from localhost. This is temporary for testing, but that's fine for me. thanks Alex! – Stella Jun 27 '23 at 17:53