TransWikia.com

NGINX Enable CORS for a Google Places API call

Server Fault Asked by Eusthace on November 29, 2020

I would like to enable CORS for Google Places API in order to call it from an Ionic 2 app with a WkWebView.

I am doing this in my nginx default config:

server {
    listen 80 default_server;
    listen [::]:80 default_server;


    root /var/www/html;

    server_name _;

    location / {
    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    # Nginx doesn't support nested If statements, so we
    # concatenate compound conditions on the $cors variable
    # and process later

    # If request comes from allowed subdomain
    # (*.googleapis.com) then we enable CORS
    if ($http_origin ~* (https?://.*.googleapis.com(:[0-9]+)?$)) {
       set $cors "1";
    }

    # OPTIONS indicates a CORS pre-flight request
    if ($request_method = 'OPTIONS') {
       set $cors "${cors}o";
    }

    # Append CORS headers to any request from 
    # allowed CORS domain, except OPTIONS
    if ($cors = "1") {
       more_set_headers 'Access-Control-Allow-Origin: $http_origin' always;
       more_set_headers 'Access-Control-Allow-Credentials: true' always;
       proxy_pass      http://111.111.111.111:80;
    }

    # OPTIONS (pre-flight) request from allowed 
    # CORS domain. return response directly
    if ($cors = "1o") {
       more_set_headers 'Access-Control-Allow-Origin: $http_origin';
       more_set_headers 'Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE';
       more_set_headers 'Access-Control-Allow-Credentials: true';
       more_set_headers 'Access-Control-Allow-Headers: Origin,Content-Type,Accept';
       add_header Content-Length 0;
       add_header Content-Type text/plain;
       return 204;
    }

    # Requests from non-allowed CORS domains
       proxy_pass      http://111.111.111.111:80;
  }

}

But I am geeting a 502 Bad Gateway everytime I call:

http://111.111.111.111/maps/api/place/textsearch/json?key=APIKEY&query=starbucks

Any help, please?

One Answer

Ok, I've found my mystake, proxy_pass should redirect to google not to my server:

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;

    server_name _;

    #location / {
    #   # First attempt to serve request as file, then
    #   # as directory, then fall back to displaying a 404.
    #   try_files $uri $uri/ =404;
    #}

    location / {
     proxy_pass https://maps.googleapis.com;
     add_header 'Access-Control-Allow-Origin' '*' always;
     add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS' always;

         #preflight request
     if ($request_method = 'OPTIONS') {
       add_header 'Access-Control-Max-Age' '1728000';
       add_header 'Content-Type' 'text/plain charset=UTF-8';
       add_header 'Content-Length' '0';

       add_header 'Access-Control-Allow-Origin' '*' always;
         add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS' always;
       return 204;
     }
   }    
}

# Virtual Host configuration for example.com
#
# You can move that to a different file under sites-available/ and symlink that
# to sites-enabled/ to enable it.
#
#server {
#   listen 80;
#   listen [::]:80;
#
#   server_name example.com;
#
#   root /var/www/example.com;
#   index index.html;
#
#   location / {
#       try_files $uri $uri/ =404;
#   }
#}

Answered by Eusthace on November 29, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP