☰

NGINX 为 Google Places API 调用启用 CORS

tag-icon • tag-icon nginx proxypass cors
NGINX 为 Google Places API 调用启用 CORS

我想为 Google Places API 启用 CORS，以便从带有 WkWebView 的 Ionic 2 应用程序调用它。

我在我的 nginx 默认配置中这样做：

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;
  }

}

但是我每次拨打电话时都会收到 502 Bad Gateway：

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

请问有什么帮助吗？

答案1

好的，我找到了我的疑问，proxy_pass 应该重定向到谷歌而不是我的服务器：

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;
#   }
#}

相关内容