How to add Cross Origin Resource Sharing request headers?

Question

I am building a REST-consumer using React JS, I have build a REST api as the backend service the frontend will be a completly different application. To sepparate the frontend from the backend.

What I am currently struggling with is making a cross origin request from the frontend to the backend. The backend is hosted at http://localhost:8080 and the frontend react app is hosted at http://localhost:3000. When making a request I get the following error on the console:

Failed to load http://localhost:8080/api/something: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Right now I have fixed this error with a chrome extension to allow CORS: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

But this is just a temporary sollution, I have tried adding the Access-Control-Allow-Origin header but that does not seem to work.

This my code used to make the request:

let Myheaders = new Headers()
Myheaders.append("Access-Control-Allow-Origin", "http://localhost:8080/")

let res = await fetch("http://localhost:8080/api/something", 
{
    method: "get", 
    mode: "cors",
    headers: Myheaders
})
let res1 = await res.json()

I have tried adding multiple values for the Access-Control-Allow-Origin header with backslash or without backslash, but nothing seems to work.

Anyone run into the same issues and have a sollution for it?

Your JavaScript cannot give itself permission to access the REST API. The permission must be granted by the REST API. The headers you are trying to add belong on the **response**, not the request. — Quentin, Sep 21 '18 at 07:43
Thanks, turned out it was a backend issue. The backend is build in Springboot with Kotlin and with this tutorial it worked on the first try: https://spring.io/guides/gs/rest-service-cors/ — SparklyUnicorn, Sep 21 '18 at 07:58

score 2 · Accepted Answer · answered Sep 21 '18 at 07:41

2

this is a backend issue not a frontend you should allow the cors from the backend and this is depend on the technology that used in the backend

answered Sep 21 '18 at 07:41

Mohammad Shrateh

74
4

Well I can make requests from Postman to the backend, so that is all setup correctly. – SparklyUnicorn Sep 21 '18 at 07:46
1

@HarryStylesheet — The accepted answer on the duplicate question explains why it works with Postman but not your browser-based JS. – Quentin Sep 21 '18 at 07:47
i have the same problem before when the request go from browser its include the domain in its header but in postman no send any domain in header i use spring boot in my backend and i do this by adding the @Bean CorsConfigurationSource corsConfigurationSource() { CorsConfiguration configuration = new CorsConfiguration(); configuration.setAllowedOrigins(Arrays.asList("https://example.com")); configuration.setAllowedMethods(Arrays.asList("GET","POST")); ..... return source; } to my security configuration – Mohammad Shrateh Sep 21 '18 at 07:54
It is fixed now, I also used Springboot and Kotlin in the backend. This tutorial helped me out: https://spring.io/guides/gs/rest-service-cors/. Just at the @CrossOrigin(origins = "http://localhost:9000") annotions above your REST controller – SparklyUnicorn Sep 21 '18 at 08:00
its nice but if you to allow CORS on all API you can do by adding the code to avoid add the annotation to all your API – Mohammad Shrateh Sep 21 '18 at 08:03
` @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/greeting-javaconfig").allowedOrigins("http://localhost:9000"); } }; }` – SparklyUnicorn Nov 06 '18 at 08:21

How to add Cross Origin Resource Sharing request headers?

1 Answers1