私のウェブサイトで www.website.com ではなく website.com を閲覧している場合、SVG を読み込むのに問題がありました。ウェブサイトは nginx サーバー上にあるので、これを追加して問題を解決しました。
location / {
add_header Access-Control-Allow-Origin "*";
}
しかし、私が読んだ内容によると、これはセキュリティ上の問題を引き起こすようです。 * の代わりに www.website.com と website.com のみを指定する方法はありますか? PHP でこれに遭遇し、nginx に必要なことのように思えたので質問します。
header('Access-Control-Allow-Origin: http://www.website.com');
header('Access-Control-Allow-Origin: http://website.com');
ベストアンサー1
のW3仕様複数のオリジンをスペース区切りのリストで指定できると説明されているAccess-Control-Allow-Origin
が、実際には、現在のブラウザの実装ではこれが正しく解釈されない可能性が高い(例えば、執筆時点ではFirefox 45では失敗する)。このコメント。
必要なものを実装するには、次の nginx スニペットで受信Origin
ヘッダーをチェックし、それに応じて応答を調整します。
location / {
if ($http_origin ~* "^https?://(website.com|www.website.com)$") {
add_header Access-Control-Allow-Origin "$http_origin";
}
}
必要に応じて正規表現にドメインを追加します。 のみをs?
サポートする場合は を削除できますhttp://
。
注意:HTML経由でウェブページに直接SVGを含める場合(例<img src="http://example.com/img.svg>
:)は、CORSとはAccess-Control-Allow-Origin
必要ありません。crossorigin
画像に属性を使用する場合(例:CORS 対応画像)、または JS 経由で読み込む場合は、上記が必要です。
nginx で同じ名前の複数のヘッダーを追加することに対する元の回答 (CORS 参照は誤っていたため削除されました):
add_header
特定のブロック内で複数回使用できます。
location / {
add_header Header-Name "value";
add_header Header-Name "value2";
}
回答には次の内容が含まれます。
Header-Name: value
Header-Name: value2
add_header
変数を使用することもできます。パラメータを追加したい場合もあることに注意してくださいalways
(http://nginx.org/en/docs/http/ngx_http_headers_module.html#add_header) を選択すると、エラーを含むすべての応答コードにヘッダーが追加されます。