API call with javascript generates "Cross-Origin Request Blocked"

Troubleshooting
1

I need quick help for making a request do the Mattermost API of a self hosted server.

I try to do the following inside javascript:

fetch("https://mydomain/api/v4/users/someuserid", {
                                method: "GET",
                                headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + 'my personal acess token', 'X-Requested-With': 'XMLHttpRequest'}
                            }).then((response) => response.json())
                                .then((data) => {console.log(data)})

I’m testing this on my local machine by opening the javascript console of Firefox. If i have opened a tab with “https://mydomain” the request works perferctly. However, i need to execute this later on a different website with a different domain. So when i try to open google.com and do the same i get a CORS error.

XHROPTIONS https://mydomain/api/v4/users/someuserid CORS Missing Allow Origin

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://mydomain/api/v4/users/someuserid. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://mydomain/api/v4/users/someuserid. (Reason: CORS request did not succeed). Status code: (null).

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

I have tried to set the “Enable cross-origin requests from:” option to * inside the system console but it had no effect.

The relevant part of the nginx config looks like this at the moment:

server {
   listen 80;
   server_name    my-domain;

   location / {
       client_max_body_size 50M;
       proxy_set_header Connection "";
       proxy_set_header Host $http_host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
       proxy_set_header X-Frame-Options SAMEORIGIN;
       proxy_buffers 256 16k;
       proxy_buffer_size 16k;
       proxy_read_timeout 600s;
       proxy_cache mattermost_cache;
       proxy_cache_revalidate on;
       proxy_cache_min_uses 2;
       proxy_cache_use_stale timeout;
       proxy_cache_lock on;
       proxy_http_version 1.1;
       proxy_pass http://backend;
   }
}

Adding ‘Access-Control-Allow-Origin’: ‘*’ to the header in the javascript code does also not help.

Can someone please help me out with this?

2

I managed to fix it by pasting the following inside the ‘location /’ part of the nginx config:

       #
       ### CORS settings for mydomain
       #
       set $cors '';
       set $cors_allowed_methods 'GET, POST, PUT, DELETE, OPTIONS';
       set $cors_allowed_headers 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With';

       if ($http_origin ~ '^https?://(www\.)?mydomain$') {
         set $cors 'origin_matched';
       }

       # Preflight requests
       if ($request_method = 'OPTIONS') {
         set $cors '${cors} & preflight';
       }

       if ($cors = 'origin_matched') {
          add_header 'Access-Control-Allow-Origin' "$http_origin";
          add_header 'Access-Control-Allow-Methods' $cors_allowed_methods;
          add_header 'Access-Control-Allow-Headers' $cors_allowed_headers;
       }

       if ($cors = 'origin_matched & preflight') {
         add_header 'Access-Control-Allow-Origin' "$http_origin";
         add_header 'Access-Control-Allow-Methods' $cors_allowed_methods;
         add_header 'Access-Control-Allow-Headers' $cors_allowed_headers;
         # Tell client that this pre-flight info is valid for 20 days
         add_header 'Access-Control-Max-Age' 1728000;
         add_header 'Content-Type' 'text/plain charset=UTF-8';
         add_header 'Content-Length' 0;
         return 204;
       }
       #
       ### CORS settings for mydomain END
       #