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

Question

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      term: '',

    }
  },
  methods: {
    async exe() {
      this.$emit('loadStart')
      const headers = {'Access-Control-Allow-Origin': '*'}
      const { data } = await axios.get('//test.com/', {headers});
      this.$emit('loadComplete', { results: data.results})
    }
  }
}
</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

Answer 1

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

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

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

Comments

[tenlife]

回答ありがとうございます。
シンプルリクエストとは下記のような事でしょうか？
(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]

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

[tenlife]

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]

> jsファイルを新しく作りそこに下記を記述し

なぜクライアント側のヘッダを再設定しているのですか？

[maisumakun]

> サーバ側の設定は具体的にはどのファイルを変更するのでしょうか？

サーバサイドの実装が何も書かれていないので、なんとも言えません。