Vue.js+axios+HTML CORSを有効化したいです

Question

var app = new Vue({
    el: '#app',
    data: {
      info: {

      },
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        'Access-Control-Allow-Origin': '*',
      }
    },
    mounted() {
      axios
      .get('/パス/', headers)
      .then((res) => {
        this.info = response
        console.log("RESPONSE RECEIVED: ", res);
      })
      .catch((err) => {
        console.log("AXIOS ERROR: ", err);
      })
    },
  })

この書き方だとReferenceError: "headers is not defined"エラーが出てしまいます。
CORSを有効化するためにはどこを直したらいいのか教えてください。

Answer 1

headersではなく、this.headersでしょうね。

Comments

[rikataso]

回答ありがとうございます
this.headersに書き換えたところ"headers is not defined"エラーは解消されましたが、
headersの内容が間違えているようで、ネットワークエラーと表示されてしまいます。
もし、CORSを有効化する書き方をご存知でしたら教えていただけないでしょうか。

[fuuki]

axios の config は https://github.com/axios/axios#request-config にあるように Object で渡す必要があるので，axios.get('/パス/', {headers : this.headers}) とすればよいと思います．

ついでに，headers を data でバインディングしなくていい場合は，

const headers = {headersの中身}
axios.get('/パス/', {headers})

みたいに書くとシンプルに書けると思います．