スマートプラグを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) - HTTP | MDN
オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。ウェブアプリケーションは...
developer.mozilla.org
回避策
セオリー通りであれば 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...
webpack.js.org
最終的には以下のような形になりました。
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
コメント