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

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

新規登録して質問してみよう
ただいま回答率
85.35%
nginx

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

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

Q&A

0回答

2193閲覧

nginxにおける、CORS設定

4glte

総合スコア4

nginx

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

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

0グッド

2クリップ

投稿2020/09/08 11:46

編集2020/09/09 02:00

前提・実現したいこと

超初心者です。
現在webサイトを作成していて、
あるサイトから自身のサーバー(nginx)内にあるファイルにアクセスしたいです。
どうすればこのエラーを回避して、ファイルにアクセスできるでしょうか。

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

アクセスすることができず、以下のメッセージが表示されます。 Failed to load resource: the server responded with a status of 403 () Access to image at 'xxxxxxxxx.com/html/good_red.png' from origin 'https://my.matterport.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

調べたこと

https://qiita.com/rysk92/items/e5cf2fab8531f8ea3683 や https://qiita.com/tukiyo3/items/8124d5066737debdc6bb を読みましたが、その構文をnginx.configのどこに入れればいいかわからないです。

ソースコード

nginx.configです

# For more information on configuration, see: # * Official English Documentation: http://nginx.org/en/docs/ # * Official Russian Documentation: http://nginx.org/ru/docs/ user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid; # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. include /usr/share/nginx/modules/*.conf; events { worker_connections 1024; } http { log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 4096; include /etc/nginx/mime.types; default_type application/octet-stream; # Load modular configuration files from the /etc/nginx/conf.d directory. # See http://nginx.org/en/docs/ngx_core_module.html#include # for more information. include /etc/nginx/conf.d/*.conf; server { listen 80; listen [::]:80; server_name _; root /usr/share/nginx/html; location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods "POST, GET, OPTIONS"; add_header Access-Control-Allow-Headers "Origin, Authorization, Accept"; add_header Access-Control-Allow-Credentials true; proxy_pass http://localhost:8888; } # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } } # Settings for a TLS enabled server. # # server { # listen 443 ssl http2; # listen [::]:443 ssl http2; # server_name _; # root /usr/share/nginx/html; # # ssl_certificate "/etc/pki/nginx/server.crt"; # ssl_certificate_key "/etc/pki/nginx/private/server.key"; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 10m; # ssl_ciphers PROFILE=SYSTEM; # ssl_prefer_server_ciphers on; # # # Load configuration files for the default server block. # include /etc/nginx/default.d/*.conf; # # error_page 404 /404.html; # location = /40x.html { # } # # error_page 500 502 503 504 /50x.html; # location = /50x.html { # } # } }

javascriptコード

var iframe; var tags; var tagg; var count; count = 0; document.addEventListener('DOMContentLoaded', () => { iframe = document.getElementById('showcase_iframe'); iframe.addEventListener('load', showcaseLoader, true); }); function showcaseLoader() { authorize(); try { window.MP_SDK.connect(iframe, 'f2f3b17ffcdb4e99afbcc0c285a9d7c7', '3.5') .then(loadedShowcaseHandler) .catch(handleError); } catch (e) { console.error(e); } } function loadedShowcaseHandler(mpSdk) { var popup = document.getElementById('js-popup'); var mattertagDesc = { label: 'Hello Mattertag', description: 'This is test', anchorPosition: { x: 0.39, y: 1.00, z: -0.122 }, stemVector: { x: 0, y: 0, z: 0 }, color: { r: 0.0, g: 0.0, b: 1.0 }, }; mpSdk.Mattertag.add(mattertagDesc).then(function (mattertagId) { console.log(mattertagId); // output: TODO }); //ここでエラーを吐いてしまいます mpSdk.Mattertag.registerIcon('GoodBlackIconId', 'good_black.png'); mpSdk.Mattertag.registerIcon('GoodRedIconId', 'http://ec2-18-224-7-206.us-east-2.compute.amazonaws.com/html/good_red.png'); tags = mpSdk.Mattertag.getData() .then(function (tags){ console.log(tags); tag0 = tags[0].sid; tag1 = tags[1].sid; tag2 = tags[2].sid; });

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

ここにより詳細な情報を記載してください。

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

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

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

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

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

ockeghem

2020/09/08 12:18

good_red.png の読み込み時にステータスが403になっているように思えますが、単独がブラウザで表示させることはできますか?
4glte

2020/09/08 12:51

html内で読み込むと正常に表示できました。 ただ、他サーバー?から読み込もうとするとエラーがでます
ockeghem

2020/09/08 13:00

html内で読み込む場合は200ですか? 403になる理由はいただいた情報からは分かりません なお、Access-Control-Allow-Credentials true を指定する場合は、Access-Control-Allow-Origin * は指定できず、オリジンを明示する必要があります
4glte

2020/09/09 01:03

>>html内で読み込む場合は200ですか? すいません、こちらはどういう意味でしょうか?? *を指定できない旨、承知しました!ありがとうございます
ockeghem

2020/09/09 01:54

200かどうかは、ブラウザの開発ツールで確認できます。 それと、そもそもの疑問なのですが、CORS設定必要ですか? 画像を表示させるだけであれば、CORSは要らないです。CORSは、JavaScriptからアクセスする場合に必要です。JavaScriptがあるのであれば、そちらも開示ください。
4glte

2020/09/09 04:55

my.matterport.comというオリジンから自身のサーバーに接続して取得した画像を、加工したいです。 javascriptのコードを追記致しました。 ご教授頂けると助かります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問