前提・実現したいこと
超初心者です。
現在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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
good_red.png の読み込み時にステータスが403になっているように思えますが、単独がブラウザで表示させることはできますか?
html内で読み込むと正常に表示できました。
ただ、他サーバー?から読み込もうとするとエラーがでます
html内で読み込む場合は200ですか? 403になる理由はいただいた情報からは分かりません
なお、Access-Control-Allow-Credentials true を指定する場合は、Access-Control-Allow-Origin * は指定できず、オリジンを明示する必要があります
>>html内で読み込む場合は200ですか?
すいません、こちらはどういう意味でしょうか??
*を指定できない旨、承知しました!ありがとうございます
200かどうかは、ブラウザの開発ツールで確認できます。
それと、そもそもの疑問なのですが、CORS設定必要ですか? 画像を表示させるだけであれば、CORSは要らないです。CORSは、JavaScriptからアクセスする場合に必要です。JavaScriptがあるのであれば、そちらも開示ください。
my.matterport.comというオリジンから自身のサーバーに接続して取得した画像を、加工したいです。
javascriptのコードを追記致しました。
ご教授頂けると助かります。
あなたの回答
tips
プレビュー