I am receiving the below messages in my Google Chrome console when running my React application which is deployed to AWS Amplify. I click on the 'Login/Signup' link of my React app, which in turn generates a GET request. The Spring Boot Java backend is also deployed to AWS Amplify. The first message which appears in the Chrome console says
Access to XMLHttpRequest at backend_URL_on_AWS_Amplify from origin frontend_URL_on_AWS_Amplify has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
The next message in my console says
GET backend_URL_on_AWS_Amplify net::ERR_FAILED
On the network tab of the developer tools, I can see the failed GET requests. On the Headers tab I see the referrer policy reads: "strict-origin-when-cross-origin". Accept reads: "application/json/ text/plain, /". There is nothing on the response tab.
Here are the lines where I use Tanstack-query to make the call to the backend, this is the call that is generating the CORS errors
const { data: empList } = useQuery("employerList", () => {
return axios.get(process.env.REACT_APP_SERVER_URL + "/employer/list");
});
There are no CORS errors occurring when testing the backend and frontend locally on my machine.
I also put the above custom headers in a customHttp.yml file, placed the file at the root of the backend and frontend source directories, pushed the code to the backend and frontend repositories and redeployed to AWS Amplify, but the CORS errors continue.
In the Spring Boot Java backend I placed the CrossOrigin annotation above the class declaration of each controller. Here is an example
@RestController
@CrossOrigin(origins = "*", allowedHeaders = "*")
@RequestMapping("/application")
public class ApplicationController {
I also placed the CrossOrigin annotation above the application class declaration as shown here
@CrossOrigin(origins = "*", allowedHeaders = "*")
@SpringBootApplication
@EnableJpaRepositories
public class JobsearchApplication {
What I expected to happen: I expected that I could click the Login/Signup link of my React app which is deployed on AWS Amplify and that the get request that is generated would run successfully, thereby populating the dropdown list of employers which the employers from the database and that I would be able to register user accounts in the system and login as a registered user.
The contents of the application.properties file of the backend are
spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5Dialect
spring.jpa.hibernate.ddl-auto = update
spring.jackson.serialization.FAIL_ON_EMPTY_BEANS=false
spring.jpa.properties.hibernate.format_sql=true
spring.http.converters.preferred-json-mapper=jackson
spring.jackson.default-property-inclusion=NON_NULL
spring.mvc.cors.enabled=true
spring.mvc.cors.allowed-origins=*
spring.mvc.cors.allowed-methods=*
spring.mvc.cors.allowed-headers=*
spring.mvc.cors.allow-credentials=true
spring.http.encoding.enabled=true
spring.http.encoding.force=true
I have also included a CorsConfig class in the application as follows
@Configuration
public class CorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("*").allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS");
}
};
}
}
