Procedure

webpack で cros を回避するメモ

Procedure
この記事は約2分で読めます。
スポンサーリンク

スマートプラグをWebアプリから操作できるようにしてみた にて ifttt に post するときに CROS の問題に直面しました。

そのときに回避した方法をメモがてら記載しておきます。

スポンサーリンク

問題エラー

フロントエンドから ifttt へ post したときに以下のエラーが発生し、post ができない状況になりました。

Access to XMLHttpRequest at 'https://*****' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CROS(Cross Origin Resourse Sharing) です。

オリジン間リソース共有 (CORS)
オリジン間リソース共有 ( Cross-Origin Resource Sharing ) (CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。

回避策

セオリー通りであれば IFTTT を叩くために バックエンドを建てるらしいですが、ちょっとめんどくさいです。

webpack の dev サーバーで回避できないかなぁと思い色々探すと proxy という機能を使うことで回避できるとのこと。

DevServer | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packagi...

最終的には以下のような形になりました。

const path = require('path');

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: 'https://maker.ifttt.com/trigger/***',
        pathRewrite: { '^/api': '' },
        secure: false,
        changeOrigin: true
      }
    }
  }
}

参考

  • devServer proxy not working #793, https://github.com/webpack/webpack-dev-server/issues/793#issuecomment-558934975

コメント

タイトルとURLをコピーしました