axiosを用いたajax通信を行ったらcorsエラーが発生してしまった

Question

前提・実現したいこと

axiosを用いて、ajax通信を行いたいです。

発生している問題・エラーメッセージ

デベロッパーツールのコンソールに以下のようなエラーが発生してしまいました。

Access to XMLHttpRequest at 'http://127.0.0.1:8000/polls/check/' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

該当のソースコード

App.Vue

<template>
  <div id="app">
    <h3>掲示板に投稿する</h3>
    <label for="name">ニックネーム:</label>
    <input id="name" type="text" v-model="name">
    <br>
    <label for="comment">コメント:</label>
    <textarea id="comment" v-model="comment"></textarea>
    <br>
    <button @click="createComment">コメントをサーバーに送る</button>
    <h2>掲示板</h2>
    
  </div>
</template>
<script>
import axios from 'axios';

export default {
  data(){
    return{
      name:'',
      comment:'',
    };
  },
  methods: {
    createComment(){
      axios.post(
        'http://127.0.0.1:8000/polls/check/',
        {
          name:this.name,
          comment:this.comment
        },
        {
          headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
          "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token"
          }
        },
      )
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error);
      })
      console.log('hello')

      this.name = '';
      this.comment = '';


    }
  },
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Vies.py

def check(request):
    if request.method == "GET":
        print('ok')
        return redirect("polls:index")
    json_dict = json.loads(request.body)

    print(json_dict)
 
    json_str = json.dumps(json_dict, ensure_ascii=False, indent=2)
    return HttpResponse(json_str)

試したこと

Django側では、こちらやこちらのサイトを参考に、pip install django-cors-headersを行いsettings.pyを以下の部分を追記しました。

INSTALLED_APPS = [
    'corsheaders',
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]
CORS_ORIGIN_WHITELIST = (
   'http://localhost:8080',
   'http://127.0.0.1:8080',
   'http://127.0.0.1:8000',
)
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_CREDENTIALS = True

また、App.vueファイルの以下hedder部分を削除した状態で、postするとPOST http://127.0.0.1:8000/polls/check/ 403 (Forbidden)とエラーが発生してしまっている状況です。

    {
          headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
          "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token"
          }
        },

補足情報（FW/ツールのバージョンなど）

エディター:VScode,OS:Mac OS

どなたか、エラー解決の為、アドバイス頂けましたら幸いです。

追記

Qiita記事を参考に、axiosにwithCredentials: trueを追記しましたがPOST http://127.0.0.1:8000/polls/check/ 403 (Forbidden)が表示されている状態です。

  axios.post(
        'http://127.0.0.1:8000/polls/check/',
        {
          name:this.name,
          comment:this.comment
        },
        { 
          withCredentials: true
        },
      
      )

追記2

こちらの記事を参考に以下の部分をApp.vueに追記しましたが、エラーは解決されていない状況です。

import axios from 'axios';
const headers = {"X-CSRFTOKEN": "<csrf_token_very_long_string_goes_here>"}

axios.postメソッドには、 {headers: headers},を引数に追加しました

Comments

[退会済みユーザー]

エラーメッセージが Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response. と言ってますけど、そのあたりは調べましたか？

[study_111]

エラー内容から、Qiita記事を参考にコードを追記しました。
django側ではdjango-cors-headersをインストールすれば良いみたいなので、もしかしたらフロント側の修正がどこかで必要かもしれないですね
https://stackoverflow.com/questions/45256403/django-angular-cors-error-access-control-allow-origin-not-allowed

[退会済みユーザー]

普通にユーザーがブラウザを使ってアクセスするケースで、プリフライトリクエスト（エラーメッセージからそうであろうと想像）になる場合は、以下の記事の画像（Fiddler によるキャプチャ画像）の左下のウィンドウに示すように HTTP 動詞が OPTION になって、赤枠で囲ったヘッダが送信されるはずです。

http://surferonwww.info/BlogEngine/post/2016/12/27/wcf-service-in-cross-domain.aspx

それを受けて、画像の右下のウィンドウの赤枠で囲ったようなヘッダが返ってくるはずです。

エラーメッセージの "Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response." と話が合わないのが解せませんが、質問者さんの方でも Fiddler を使って要求・応答ヘッダーがどうなっているか調べてはいかがですか。

axios とか全く知らないので、もし的外れのレスでしたらすみません。

Answer 1

追記：Vue 公式ドキュメントによって、フロントエンドとバックエンドのサーバーが同一ではない場合、設定の devServer.proxy にバックエンドサーバーのアドレスを入れれば、フロントエンドで知らないリクエストを全部バックエンドに渡せます。

// vue.config.js
module.exports = {
  devServer: {
    proxy: 'http://localhost:8000'
  }
}

そうしたら、リクエストの際にアドレスを明言する必要がなくなります。

      axios.post(
        '/polls/check/',
        {
          name:this.name,
          comment:this.comment
        },
      )

追記：そうしてもCSRFを踏んだら、Django側その関数に @csrf_exempt でマークしてください

@csrf_exempt
def check():
    pass

---

AkitoshiManabeさんの言う通り、http://127.0.0.1:8080 と http://localhost:8080との違いで Cross Origin エラーが出てます。

こちらのコードから推測できる誤解を解けておきましょう：

      axios.post(
        'http://127.0.0.1:8000/polls/check/',
        {
          name:this.name,
          comment:this.comment
        },
        {
          headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
          "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token"
          }
        },
      )

上記の axios の headers はクライアントからサーバーへのリクエストの headers です。例えば、Cookie や Accept など、クライアントができることを示すためです。

Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers、この三つの headers はサーバーができることですから、サーバーからクライアントへのレスポンスについてるものです。この三つの headers は axios の headers に入れても意味がありません。削除していいです。

CORS_ORIGIN_WHITELIST = (
   'http://localhost:8080',
   'http://127.0.0.1:8080',
   'http://127.0.0.1:8000',
)

上記の設定をしたら、上記の headers は Django からのレスポンスに CorsMiddleware によって自動的についてるはずですが、カッコを使ってしまい list ではなく tuple を使っていますので、どんな反応してるかわかりません。カッコ () をブラケット [] で書き換えてみたらいかがでしょうか？

Comments

[study_111]

ご回答ありがとうございます。
headersについてなど、基礎的な部分が分かっておりませんでした為、大変勉強になります。
javascriptファイルの「headers」の部分を削除し、「CORS_ORIGIN_WHITELIST 」の部分をカッコではなくブラケットに修正してみましたが、「POST http://127.0.0.1:8000/polls/check/ 403 (Forbidden)」
となってしまいました。
こちら少々調べてみたのですが、「CSRF」トークンの付加が必要になってくるということなのでしょうか？

[YufanLou]

そうです。index でレスポンスする html のテンプレートに {% csrf_token %} を置いてから Vue の中に const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value; できるはずです。そして、headers: { 'X-CSRFToken': csrftoken }

https://docs.djangoproject.com/en/dev/ref/csrf/#acquiring-the-token-if-csrf-use-sessions-or-csrf-cookie-httponly-is-true

[study_111]

ご返信ありがとうございます。
実は、ご回答頂きました「index でレスポンスする html のテンプレートに {% csrf_token %} を置いてから 」こちらの部分なのですが、現状VueCliにてプロジェクトを作成し、「npm run server」を実行し、「http://localhost:8080/」にアクセスしましたら「App.Vue」の内容が表示されているといった状況です。
その為、Djangoテンプレートは使用しておらず、App.Vueから直接Django側にaxiosからリクエスト通信を行なっているといった状況です。
分かりにくいご質問で、申し訳ないです。

[YufanLou]

ごめんなさい、そこを忘れました。いいブログが見つかりました。

https://johnfraney.ca/posts/2019/05/14/integrate-django-vuejs/

要するに、vue.config.js に proxy を設定します。

[study_111]

ご尽力頂きまして、誠にありがとうございます。
ブログ記事の方、読ませて頂いたのですが、英語で記載されておりました為、google翻訳にかけてみたのですが、自分がVue.jsの経験が浅いのもあり、いまいち分らない部分が多くございました。
もし、お願い出来ましたら、お時間のございます際に、追加で記述するコードなどの詳細を、ご教示頂けましたら幸いです。

[study_111]

ご追記ありがとうございます。
「vue.config.js」を「src」フォルダがある場所と同じ階層に作成し、ご回答頂きました通り記述致しました。そして、「axios.post」を指定している場所に、「'/polls/check/',」を指定し、再度リクエストを行いましたが、「500 Internal Server Error」となりました。こちら恐らく、Vue.jsの方で立ち上げているサーバーが「http://localhost:8080/ 」であり、Djangoの開発サーバーが、 「http://127.0.0.1:8000/」であるからだと推測されます。
その為、「axios.post」で指定した部分を「http://127.0.0.1:8000/polls/check/」に書き換え再度リクエストを行いました。しかし、Django側のターミナルでは「Forbidden (CSRF cookie not set.): /polls/check/」と表示され、エラーコードが返ってきてしまっている状況でございます。こちら自分でもどうにか解決方法がないか、調べてみたいと思います。

[YufanLou]

すみません、追記の中のポートに4000で書いてしまいましたので、Djangoサーバーのアドレスではないため500エラー出ましたでしょう。ポートを8000で試してみましょう。

[study_111]

ご修正頂きまして、ありがとうございます。
vue.config.jsを修正し再度Django側へリクエストを送りましたが、「Forbidden (CSRF token missing or incorrect.): /polls/check/」とDjango側で表示されてしまい、修正前と同様にエラーが出力されてしまっている状況でございます。

[study_111]

ご追記ありがとうございます。
「 @csrf_exempt 」をつけたことで、csrfによるエラーが解消されました。
長々とご親切に教えて頂きまして、ありがとうございました。

[YufanLou]

僕も経験浅くて、色々勉強になりました。これはあくまで開発ための一時的なもので、デプロイの際には色々修正しなければなりません。他に webpack を使ってまともに Django から Vue フロントエンドを表示してる方法もありますので、ご時間があればそちらの方も探してみてください。

[study_111]

デプロイの際は、開発用の設定のままになっていないように注意したいと思います。
ご親切にご助言下さり、ありがとうございました。
今後も、教えて貰ったことを生かし、勉強を続けていきたいと思います。

Answer 2

オリジン は 「プロトコル + // + ホスト名 + ポート番号」で成る文字列です。

ブラウザは http://127.0.0.1:8080 と http://localhost:8080 とはクロスオリジンの関係にあるものとして、CORS エラーを吐きます。

エラー解決の為、アドバイス頂けましたら幸いです

他者の記事やコードを真似て、手を動かして確認できているように感じますが、
それぞれの仕組み（なぜ、そのように書けるのか？）について、詳細を再確認してください

• MDN HTTPヘッダ ... 要求ヘッダ / 応答ヘッダ の違いを間違えない
• MDN オリジン間リソース共有 (CORS)
• Google検索 CSRF ... （ご質問の追記２に関連）CORSを解決して考えましょう。

活字ばかりだと退屈かもしれませんが、仕組みを覚えると、エラー原因は自身で特定できるようになります。

Comments

[study_111]

ご回答ありがとうございます。
>MDN HTTPヘッダ ... 要求ヘッダ / 応答ヘッダ の違いを間違えない
MDN オリジン間リソース共有 (CORS)
Google検索 CSRF ... （ご質問の追記２に関連）CORSを解決して考えましょう。

こちら、確認してみました。
やはり恐らく、csrfトークンをpostをする際に、必要だということが分かったのですが、csrfトークンの生成&付加の方法が分からず、手詰まりしてしまってる状況です。。

[AkitoshiManabe]

CSRFの特徴は、
1. サーバー-ブラウザ間で事前にトークン（合言葉）を示し合わせる。
2. POSTされたら、トークンを照合してDBに書き込み/無視。トークンを棄てる

本題（CORS）に関連するのは、1. でトークンを示し合わせる際に HTTPヘッダーを使う場合（Access-Control-Allow-Headers が必要）です。他にも単に input[type=hidden] に埋め込む実装もあります（CORSは無関係）。
修学目的であれば、複数の決め打ちされたトークンをループする手法が使えるでしょう。
詳細はご質問（CORS）とは別になりますので、概要のみのコメントとさせていただきます。

[study_111]

ご返信ありがとうございます。
> 1. サーバー-ブラウザ間で事前にトークン（合言葉）を示し合わせる。
こちらなのですが、実際に運用していく目的であります為、ランダムに一意に生成されるトークンの生成を考えています。
また、サーバーとブラウザ間で示し合せる為には、フロント側で生成したcsrfトークンをDjango側で検証する必要かと思うのですが、今回djangoのテンプレートエンジンを使用し{% csrf_token %}のような形で生成している訳ではない為、実際にどのようにブラウザから送られてきたトークンを検証するのかといった部分が分からない状態ですね。。

[AkitoshiManabe]

> ブラウザから送られてきたトークンを検証する
サーバー側で生成してブラウザに渡した情報ですので、セッションとしてサーバー側で保持しておく。
POST時にデータ保存前に比較する（比較後はセッションとの紐付けを解除）。という形で検証できそうですよね。

ご質問の本題であるCORSから脱線して、CSRF、Sessionの話題に変わっていますので、色々と試してみて、改めて質問にまとめてみてはいかがでしょう。

[study_111]

そうですね。もう少し色々と調べてみて、新たに回答がつかなかった場合、質問を新たに立てるか考えたいと思います。