質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

1回答

1355閲覧

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

rikataso

総合スコア17

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

1クリップ

投稿2018/08/11 11:20

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を有効化するためにはどこを直したらいいのか教えてください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

投稿2018/08/11 14:10

HayatoKamono

総合スコア2415

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rikataso

2018/08/12 02:22

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

2018/08/30 03:13

axios の config は https://github.com/axios/axios#request-config にあるように Object で渡す必要があるので,axios.get('/パス/', {headers : this.headers}) とすればよいと思います. ついでに,headers を data でバインディングしなくていい場合は, const headers = {headersの中身} axios.get('/パス/', {headers}) みたいに書くとシンプルに書けると思います.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問