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

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

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

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

Q&A

1回答

24728閲覧

Vue.jsでaxiosを使った通信でCORS policyで止められる

tenlife

総合スコア70

Vue.js

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

0グッド

0クリップ

投稿2020/04/26 23:46

Vue.js初心者です。

axiosを使用して通信するところでエラーが出てしまいます。

Access to XMLHttpRequest at 'http://test.com/' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

調べると結構出てきたので、試してみましたが上手くいきませんでした。
自分の理解が低く、理解できないところもありました。
https://qiita.com/Ryoma0413/items/c41d10d2e6e2a420c3cf
https://qiita.com/att55/items/2154a8aad8bf1409db2b#simple-request-%E3%81%A8-preflight-request-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6
https://b1tblog.com/2019/11/03/vue-axios/
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
https://teratail.com/questions/140784

vue

1<script> 2import axios from 'axios'; 3 4export default { 5 data() { 6 return { 7 term: '', 8 9 } 10 }, 11 methods: { 12 async exe() { 13 this.$emit('loadStart') 14 const headers = {'Access-Control-Allow-Origin': '*'} 15 const { data } = await axios.get('//test.com/', {headers}); 16 this.$emit('loadComplete', { results: data.results}) 17 } 18 } 19} 20</script>

試した事

import axios from 'axios'; axios.defaults.headers.get['Access-Control-Allow-Origin'] = '*'

vue.config.jsを作成して
https://qiita.com/Ryoma0413/items/c41d10d2e6e2a420c3cf

module.exports = { devServer: { proxy: { "/api/": { target: "http://localhost:8080", } } } }; vueのファイル /api/を追加 const headers = {'Access-Control-Allow-Origin': '*'} const { data } = await axios.get('/api/test.com/', {headers}); ↓ 404 (Not Found) 設定がうまう行ってないのか

dataに設定してthis.で呼び出し
https://teratail.com/questions/140784

export default { data() { return { term: '', headers: { 'Content-Type': 'application/json;charset=UTF-8', 'Access-Control-Allow-Origin': '*', } } }, methods: { async exe() { this.$emit('loadStart') const { data } = await axios.get('//test.com/', {headers: this.headers}); this.$emit('loadComplete', { results: data.results}) } } } ↓ Access to XMLHttpRequest at test.com from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
web上のrequest headers Access-Control-Allow-Origin: *の設定はされていました。

自分の力では解決する事ができませんでした。
どなたか知恵を貸していただきたいです。

よろしくお願いします。

vue/cli 4.3.1

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

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

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

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

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

guest

回答1

0

リクエスト側に余計なヘッダを付与しているために、リクエストがシンプルリクエストでなくなってしまっています。

  • Access-Control-Allow-Originサーバがブラウザに対してCORSの制御を行うために送信するヘッダです。ブラウザ側からのリクエストに付与しても無意味です。
  • リクエストにContent-Typeを付与していますが、リクエストボディが存在しない(そもそもGETにリクエストボディは通常付与しない)以上全く無意味です。

ヘッダ無しでリクエストして、シンプルリクエストにしておきましょう。

投稿2020/04/27 00:10

maisumakun

総合スコア145317

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

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

tenlife

2020/04/27 01:48

回答ありがとうございます。 シンプルリクエストとは下記のような事でしょうか? (headers関連を削除しました) const { data } = await axios.get(`//itunes.apple.com/search?term=${this.term}&country=jp&entity=musicVideo`); これでやってみましたが、まだエラーが出てしまいます。 Access to XMLHttpRequest at 'http://test.com/' from origin 'http://localhost:8080' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://www.monster-dive.com' that is not equal to the supplied origin.
maisumakun

2020/04/27 02:10

サーバ側の設定を変更してください。Access-Control-Allow-Originが正しく設定されていません。
tenlife

2020/04/27 04:40

jsファイルを新しく作りそこに下記を記述し、vue側でaxiosを呼び出しでやってみましたが上手くいきませんでした。 サーバ側の設定は具体的にはどのファイルを変更するのでしょうか? import axios from 'axios'; axios.defaults.baseURL = 'http://localhost:8080'; axios.defaults.headers.get['Content-Type'] = 'application/json;charset=utf-8'; axios.defaults.headers.get['Access-Control-Allow-Origin'] = '*';
maisumakun

2020/04/27 04:42

> jsファイルを新しく作りそこに下記を記述し なぜクライアント側のヘッダを再設定しているのですか?
maisumakun

2020/04/27 04:42

> サーバ側の設定は具体的にはどのファイルを変更するのでしょうか? サーバサイドの実装が何も書かれていないので、なんとも言えません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問