質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

1回答

2144閲覧

GoogleAPIのCORSエラーを解決したい

natume4948

総合スコア9

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2021/06/21 05:15

前提・実現したいこと

GoogleAPIを使った検索サイトを作っています。
CORSエラーでマップに何も表示されなくて困っています。
CORSを回避する方法は試したのですがchoromeのnetworkを見ると
Access-Control-Allow-Originが何故か適用されていません。どうしたらいいでしょうか?
APIを記載しているのはVue.jsなのですがコードの量が多いので投稿できませんでした。

発生している問題・エラーメッセージ

Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?key=myapi&location=ido,135.keido&radius=600&type=&keyword=%E5%92%8C%E9%A3%9F&language=ja' from origin 'http://ipaddress' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

nginxのコード

nginxconf

1# For more information on configuration, see: 2# * Official English Documentation: http://nginx.org/en/docs/ 3# * Official Russian Documentation: http://nginx.org/ru/docs/ 4 5user nginx; 6worker_processes auto; 7error_log /var/log/nginx/error.log; 8pid /run/nginx.pid; 9 10# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. 11include /usr/share/nginx/modules/*.conf; 12 13events { 14 worker_connections 1024; 15} 16 17http { 18 log_format main '$remote_addr - $remote_user [$time_local] "$request" ' 19 '$status $body_bytes_sent "$http_referer" ' 20 '"$http_user_agent" "$http_x_forwarded_for"'; 21 22 access_log /var/log/nginx/access.log main; 23 24 sendfile on; 25 tcp_nopush on; 26 tcp_nodelay on; 27 keepalive_timeout 65; 28 types_hash_max_size 4096; 29 30 include /etc/nginx/mime.types; 31 default_type application/octet-stream; 32 33 # Load modular configuration files from the /etc/nginx/conf.d directory. 34 # See http://nginx.org/en/docs/ngx_core_module.html#include 35 # for more information. 36 include /etc/nginx/conf.d/*.conf; 37 38 server { 39 listen 80; 40 listen [::]:80; 41 server_name _; 42 root /usr/share/nginx/html/laravel/public; 43# root /usr/share/nginx/html/phpinfo.php; 44 45 add_header X-Frame-Options "SAMEORIGIN"; 46 add_header X-XSS-Protection "1; mode=block"; 47 add_header X-Content-Type-Options "nosniff"; 48 add_header Access-Control-Allow-Origin *; 49 add_header Access-Control-Allow-Methods "POST, GET, OPTIONS"; 50 add_header Access-Control-Allow-Headers "Origin, Authorization, Accept"; 51 add_header Access-Control-Allow-Credentials true; 52 index index.html index.htm index.php; 53 charset utf-8; 54 55 location / { 56 try_files $uri $uri/ /index.php?$query_string; 57 58 } 59 60 location = /favicon.ico { access_log off; log_not_found off; } 61 location = /robots.txt { access_log off; log_not_found off; } 62 63 error_page 404 /index.php; 64 65 location ~ .php$ { 66 fastcgi_pass unix:/run/php-fpm/www.sock; 67 fastcgi_index index.php; 68 fastcgi_split_path_info ^(.+?.php)(/.*)?$; 69 fastcgi_param SCRIPT_FILENAME $request_filename; 70 fastcgi_param PHP_VALUE "max_execution_time=1200"; 71 fastcgi_param PHP_VALUE "memory_limit=256M"; 72 fastcgi_read_timeout 1200; 73 include fastcgi_params; 74 75 } 76 77 # Load configuration files for the default server block. 78 include /etc/nginx/default.d/*.conf; 79 80 error_page 404 /404.html; 81 location = /404.html { 82 } 83 84 error_page 500 502 503 504 /50x.html; 85 location = /50x.html { 86 } 87 }

試したこと

下記でURLからリクエストを送りレスポンスを下記に記載しておきます

curl -i http://デプロイurl Access-Control-Allow-Origin: * Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: Origin, Authorization, Accept Access-Control-Allow-Credentials: true

補足情報(FW/ツールのバージョンなど)

laravel -6.2
nginx -1.2
ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

こちら、適当な記事なのですが、
https://www.zenrin-datacom.net/business/gmapsapi/api_key/

記事の「③APIキーの作成」セクションSTEP3で何かしら制限がかかっていたりしないですかね??
ご自身の開発環境とこの制限内容が一致していなかった場合、使えないかもしれないなあと思いました。

もしくはapiのリクエスト制限が無料枠を超えたとか?????

投稿2021/07/01 12:17

runnynose

総合スコア497

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問