javascript - キャンバス イメージは api.xx.com から取得されます。現在のドメインは m.xx.com です。canvas.toDataURL() が呼び出されると、クロスドメイン レポートが報告されます。

プロジェクトは Html5 の Canvas タグを使用します。canvas によって表示される画像は、JS: Canvas.toDataURL() を通じて呼び出されるサブドメイン名 api.xx.com から取得されます。クロスドメインの問題を報告します:

オリジン「http://api.xx.com」でのリダイレクトは、クロスオリジン リソース共有ポリシーによってロードがブロックされています: 要求されたリソース「http:」に「Access-Control-Allow-Origin」ヘッダーが存在しません。 //m.xx.com' へのアクセスは許可されません

Youpaiyun に関連するソリューションがあるかどうか教えてください。または、クロスドメイン画像リクエストに Access-Control-Allow-Origin ヘッダーを追加できますか?

リクエストされた画像のヘッダーに Access-Control-Allow-Origin を追加する方法

返信内容:

プロジェクトは Html5 の Canvas タグを使用します。canvas によって表示される画像は、JS: Canvas.toDataURL() を通じて呼び出されるサブドメイン名 api.xx.com から取得されます。クロスドメインの問題を報告します:

オリジン「http://api.xx.com」でのリダイレクトは、クロスオリジン リソース共有ポリシーによってロードがブロックされています: 要求されたリソース「http:」に「Access-Control-Allow-Origin」ヘッダーが存在しません。 //m.xx.com' へのアクセスは許可されません

Youpaiyun に関連するソリューションがあるかどうか教えてください。または、クロスドメイン画像リクエストに Access-Control-Allow-Origin ヘッダーを追加できますか?

リクエストされた画像のヘッダーに Access-Control-Allow-Origin を追加する方法

私は以前にこの問題に遭遇したことがありますが、使用された画像が同じサーバー上になかったために、異なるサブドメイン名によるクロスドメインの問題でもありました。
その時に採用された解決策は、サーバー経由で画像ファイルのコンテンツを取得し、それを HTML ページに出力することでした。これにより、画像のクロスドメインの問題が解決されました。 (でも記事は間違っているかもしれません!)

img.crossOrigin = "Anonymous" を追加しますimg.crossOrigin = "Anonymous"
Access-Control-Allow-OriginAccess-Control-Allow-Origin これはバックグラウンドから送信されます
以前にもこの問題に遭遇しましたが、私はそうではありませんでした他の理由により、サーバーから写真を取得することを諦めてローカルに変更する必要があったため、この方法では実行できません