Vue.js axiosのエラー対応「No ‘Access-Control-Allow-Origin’ header is present on the requested resource」

SPAサービスのフロントエンド側のVue.jsにおいて、ajaxにaxiosを使用したところ、ブラウザの以下のエラーが表示されました。

No 'Access-Control-Allow-Origin' header is present on the requested resource

1	No 'Access-Control-Allow-Origin' header is present on the requested resource

見出し

1 原因
2 vue.config.js
3 axios使用箇所
4 devServer再起動

原因

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'
            }
        }
    }
};

module.exports = {

devServer: {

proxy: {

'/api/': {

target: 'http://localhost:3001'

}

};

axios使用箇所

axios使用箇所では、以下のように/apiから指定します。

axios.get('/api/v1/xxxx')
    .then(response => {
        console.log(response.data)
    });

axios.get('/api/v1/xxxx')

.then(response => {

console.log(response.data)

});

devServer再起動

Server起動時にvue.config.jsを読み込む為、再起動する必要があります。

npm run serve

1	npm run serve

以上です。