SPAサービスのフロントエンド側のVue.jsにおいて、ajaxにaxiosを使用したところ、ブラウザの以下のエラーが表示されました。
No 'Access-Control-Allow-Origin' header is present on the requested resource
原因
CORSポリシーに基づき、クロスドメインの為、バックエンド側で許可してあげないといけないようです。
本来はフロントエンド環境とバックエンド環境は同一ドメインなので、このエラーは出ない想定です。開発環境だと、localhost:8080 と localhost:3001 を使用している為別ドメイン扱いとなります。
幸い、Vue.jsの開発環境にはproxy機能がある為、これを使用して開発を進めらられました。
vue.config.js
ディレクトリ直下(package.jsonなどがある)にvue.config.jsを作成し、以下を記載します。
module.exports = {
devServer: {
proxy: {
'/api/': {
target: 'http://localhost:3001'
}
}
}
};
axios使用箇所
axios使用箇所では、以下のように/apiから指定します。
axios.get('/api/v1/xxxx')
.then(response => {
console.log(response.data)
});
devServer再起動
Server起動時にvue.config.jsを読み込む為、再起動する必要があります。
npm run serve
以上です。
Pingback: 無料漫画のおまとめ更新通知サービス - NormalBlog.net