browser-syncでAPIをproxyする
始めに
ローカルでの開発でAPIのCORSを回避するためにproxyを通すことがあると思いますが、webpack-dev-serverを使うと簡単に設定することができます。また、検索にも引っ掛かりやすいのでつまづいたら調べることができます。
devServer: {
proxy: {
'/api': {
target: 'https://hogehoge.com',
changeOrigin: true,
},
},
}
しかしbrowser-syncを使ったパターンになると中々記事がない上、browser-syncで使用するパラメータのproxy
はwebpack-dev-serverとは違った意味で使われるため中々使い方が分かりませんでした。なのでその辺についてここでまとめたいと思います。
browser-syncで設定するproxyの勘違い
browser-syncで設定するproxyはwebpack-dev-serverと違ってローカルサーバーのhostnameを指定するものになっています。localhost
ではなくhogehoge.com
でアクセスできるようにするとかですね。あんまりどういう目的で使用するのか分かりませんが・・・。
なのでAPIを別なサーバーへproxyしたいときとかには使用できないです😓
browser-syncでAPIをproxyする方法
proxyオプションで設定できないのでどうするかと言うと、proxy用のmiddlewareを差し込みます。
具体的にはhttp-proxy-middlewareを使用して以下のようにしました。
ちなみにwebpack-dev-serverもこのパッケージを使用しているので設定方法は同じになると思います。
https://webpack.js.org/configuration/dev-server/#devserverproxy
const browserSync = require('browser-sync');
const { createProxyMiddleware } = require('http-proxy-middleware');
const bs = browserSync.create();
bs.init({
server: {
baseDir: './src',
middleware: [
createProxyMiddleware('/api', {
target: 'https://qiita.com/',
// Basic認証がある場合はユーザ名とパスワードをコロンでつなげると自動で認証してくれる
// auth: 'username:password',
changeOrigin: true,
}),
],
},
watch: true,
ghostMode: false,
});
あとは普通にbrowser-syncで立ち上げたサーバーにAPIリクエストしたらproxyしてくれます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proxy Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
</head>
<body>
<p>proxy test</p>
<script>
axios.get('/api/v2/items')
.then((response) => {
console.log(response.data);
});
</script>
</body>
</html>
終わりに
以上がbrowser-syncでAPIをproxyする方法でした。普段の開発ではwebpack-dev-serverでproxyするでいいと思いますが、webpackすらいらない場合の開発やビルド済みのファイルでローカルで動作確認する際にbrowser-syncでproxyする方法は役立つかなと思いました。
以下にサンプルのリポジトリも載せますので、興味がある方は見てください。
参考URL
Author And Source
この問題について(browser-syncでAPIをproxyする), 我々は、より多くの情報をここで見つけました https://qiita.com/wintyo/items/8a07cf3ec62ef9c135e4著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .