CORS policy blocked on Angular / NGINX

Question

I have a request from my server (Angular served by NGINX) which locates the closest schools, hospital and transport from a given long and lat.

When executing the request I am getting a CORS header error on the server (see below):

Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=long,lat&radius=500&type=school&keyword=&key=APIKey' from origin 'https://domainname.co.uk' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

The site is hosted on NGINX (Docker container) and I have amended the conf file to the below:

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    server {
        listen 80;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        location / {
            add_header Access-Control-Allow-Origin *;
            try_files $uri $uri/ /index.html;

        }
    }
}

As far as I understand the add_header line should allow Access-Control-Allow-Origin but I still keep getting the above mentioned error.

Any help is appreciated.

you dont need to add the header to the request : the header needs to be put into the response — jonathan Heindl, Apr 25 '19 at 20:32
but angualr is a bit werid with cors anyways I suggest using a reverse proxy in nginx to pass on the requst — jonathan Heindl, Apr 25 '19 at 20:33
Sorry, could you elaborate on what you mean by adding it to the response? I am using Traefik as the reverse proxy at the moment — Rutnet, Apr 25 '19 at 20:50
well cors works like this : your frontend send an OPTIONS request to the target(https://maps.googleapis.com) and in the response from the target there needs to be a header that either allows all urls to request the site or specific ones a way around that is configuring a reverse proxy that isnt bound by CORS policies . since your frontend is served by an nginx I propose using that otherwise youll probably run into cors problems to your reverse proxy — jonathan Heindl, Apr 25 '19 at 20:53
so the idea is to add a reverse proxy on the same origin to where youre serving your frontend from — jonathan Heindl, Apr 25 '19 at 20:54
example: instead of calling 'https://maps.googleapis.com/...' from your frontend call 'https:///googleapis/...' and set your reverse proxy up to jsut pass it along to google - in nginx similar to `location /googleapis/ { proxypass https://maps.googleapis.com/;}` — jonathan Heindl, Apr 25 '19 at 20:56
if your Treafik proxy is on the same origin you can obviously also use that — jonathan Heindl, Apr 25 '19 at 20:58
I managed to resolve this, in case anybody comes across this problem again, the answer is to use a client side library (instead of a server side one). See here: https://stackoverflow.com/questions/43294257/xmlhttprequest-cannot-load-no-access-control-allow-origin-header-is-present-on — Rutnet, May 17 '19 at 02:06

score 1 · Accepted Answer · answered May 17 '19 at 02:07

I managed to resolve this, in case anybody comes across this problem again, the answer is to use a client side library (instead of a server side one). See here: XMLHttpRequest cannot load No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' Google maps

CORS policy blocked on Angular / NGINX

1 Answers1