CODEWITHSUNDEEP
reactjsnginxproxyreact-routercors
Rapalagui
Rapalagui

Reputation: 89

Can't get CORS working in ReactJS Application with nginx

I am trying to make POST/PUT/PATCH/DELETE request using my ReactJs app running in Docker (not using express) and my requests are blocked by CORS. My backend is a Spring Boot Service, also running in Docker.

Errors:

xhr.js:166 OPTIONS http://<MY_LOCAL_DOCKER_BACKEND_IP>:8080/api/... 403

and

Access to XMLHttpRequest at 'http://<MY_LOCAL_DOCKER_BACKEND_IP>/api/...' from origin 'http://<MY_LOCAL_DOCKER_FRONTEND_IP>:8090' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Also I am using React-Router.

I'm running my frontend on nginx and this is what my nginx.conf looks like:

server {

  listen        8090;
  server_name   <MY_LOCAL_DOCKER_FRONTEND_IP>:8090;

  access_log    /var/log/nginx/host.access.log;
  error_log /var/log/nginx/host.error.log;

  root   /usr/share/nginx/html;
  index  index.html index.htm;

  location ~* \.(?:manifest|appcache|html?|xml|json)$ {
     expires -1;
   }

  location ~* \.(?:css|js)$ {
     try_files $uri =404;
     expires 1y;
     access_log off;
     add_header Cache-Control "public";
   }

  # Any route containing a file extension (e.g. /devicesfile.js)
  location ~ ^.+\..+$ {
    try_files $uri =404;
  }

  location / {
      root /usr/share/nginx/html;
      index index.html;
      autoindex on;
      set $fallback_file /index.html;
      if ($http_accept !~ text/html) {
          set $fallback_file /null;
      }
      if ($uri ~ /$) {
          set $fallback_file /null;
      }
      try_files $uri $fallback_file;


      add_header 'Access-Control-Allow-Origin' 'http://<MY_LOCAL_DOCKER_FRONTEND_IP>:8090' always;
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, PATCH, DELETE' always;
      add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type, Origin' always;
      proxy_pass http://<MY_LOCAL_BACKEND_IP>:8080; #backend running on port 8080
      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;

  }
}

NOTE: Routing works just fine, just my main page under 

http://<MY_LOCAL_DOCKER_FRONTEND_IP>:8090/

does not get recognized when I try to open it directly (via URL). Routing to it (via NavBar) works fine.

EDIT: Maybe my Spring Config is wrong? I am using this global example which works fine for GET Requests.

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }
}

Upvotes: 2

Views: 10717

Answers (1)

Rapalagui
Rapalagui

Reputation: 89

Found my Problem! My Spring Boot Backend used a wrong CORS Config. I did some changes to the nginx.conf and replaced the Spring Boot CORS Config with this answer (the old one, not the updated one) of @alexanoid. My current nginx.conf (includes react-router support):

server {

  listen        8090;
  server_name   localhost;

  access_log    /var/log/nginx/host.access.log;
  error_log /var/log/nginx/host.error.log;

  root   /usr/share/nginx/html;
  index  index.html index.htm;

  location ~* \.(?:manifest|appcache|html?|xml|json)$ {
     expires -1;
   }

  location ~* \.(?:css|js)$ {
     try_files $uri =404;
     expires 1y;
     access_log off;
     add_header Cache-Control "public";
   }

  # Any route containing a file extension (e.g. /devicesfile.js)
  location ~ ^.+\..+$ {
    try_files $uri =404;
  }

  location / {
      root /usr/share/nginx/html;
      index index.html;
      autoindex on;
      set $fallback_file /index.html;
      if ($http_accept !~ text/html) {
          set $fallback_file /null;
      }
      if ($uri ~ /$) {
          set $fallback_file /null;
      }
      try_files $uri $fallback_file;

      if ($request_method = 'OPTIONS') {
          add_header 'Access-Control-Allow-Origin: $http_origin');
          add_header 'Access-Control-Allow-Origin: GET, POST, DELETE, PUT, PATCH, OPTIONS');
          add_header 'Access-Control-Allow-Credentials: true');
          add_header 'Vary: Origin');

      }

       add_header 'Access-Control-Allow-Origin' "$http_origin" always;
       add_header 'Access-Control-Allow-Credentials' 'true' always;
       add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, PATCH, DELETE, OPTIONS' always;
       add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;

  }
}

Upvotes: 4

Related Questions