http-proxy-middleware を使用して画像操作の CORS 簡易対処 (Nuxt.js)

画像操作時の CORS の問題

別サーバなど違うドメインからの画像を使用する際
表示するだけであれば特に問題はないですが
CORS の制限で JavaScript などでの操作ができないケースがあります。

サーバでの対応などで対応するケースがあるようですが

PHP などでいったんサーバでダウンロードし、
それをクライアントにレスポンスとして返すという対応をしたことがあったので

Vue.js などの開発の際に簡易に対応する方法として
http-proxy-middleware を使用することを試してみました。

設定など

nuxt.config.js

  ・・・
  proxy: {
    '/image/edit': {
      target: 'http://homestead.test/',
      pathRewrite: {
        '^/image/edit/': '',
      },
    },
  ・・・

• http://homestead.test/ が画像サーバ
• テンプレートなどで src を指定する際に /image/edit/～ として指定

edit.vue

<template lang="pug">
  div
    span http-proxy-middleware 使用
    croppa(
      :initial-image="'/image/edit/edit.jpg'"
    )
    span URL を直接指定
    croppa(
      :initial-image="'http://homestead.test/edit.jpg'"
    )
</template>

<script>
import Vue from 'vue';
import Croppa from 'vue-croppa';

Vue.use(Croppa);
export default {};
</script>

画像操作のコンポーネントとして Vue Croppa を使用しています。
initial-image に指定した URL で初期画像を指定しますが

• 上のほうは http-proxy-middleware により読み替えられる指定であり
• 下は直接 URL を指定

という形になっております。

結果

http-proxy-middleware を使用したほうは正しく画像が反映され
URL 指定のほうは CORS の制限により読み込みに失敗しました。

http-proxy-middleware などを使用可能であれば
簡易的な CORS 対策に使用可能なのでは・・・と思われます。