ローカルのAxiosから別サーバにあるLaravelにPostできない

Question

前提・実現したいこと

ローカルのAxiosからLaravelにデータをポストして、値を受け取りたい。

axiosのPost機能を実装中に以下のエラーメッセージが発生しました。

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

Access to XMLHttpRequest at 'http://hoge.net/request/qr-auth' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

該当のソースコード

    const axiosBase = axios.create({
      baseURL: "http://hoge.net:80",
      headers: {
        'Content-Type': 'text/html',
        "Access-Control-Allow-Origin": '*'
      },
      responseType: "json"
    });


    axiosBase.post('/request/qr-auth',
      {
        data: {
          token: data
        }
      }
    ).then(response => {
      console.log(response.data);
    }).then(response2 => {
      console.log(response2);
    }).catch(err => {
      console.log(err.data)
    });

試したこと

"Access-Control-Allow-Origin": '*'
や
"Access-Control-Allow-Origin": 'http://hoge.net'
を[headers]に書きましたが、適用されているのかどうかもわかりません。

https://qiita.com/r_gaya/items/74c3d4b5a217ee50bde4
上記のようにLaravel側でもいろいろしてみましたがダメでした。。。

どうすれば、CORSによる通信がAxiosで可能になるのでしょうか？

Answer 1

すでにBAが出ているようですが
Access-Control-Allow-Originは、接続を許可するドメイン名を記入
なので、今回の場合はlocalhostを設定するのが適切です

Answer 2

Laravelでサーバー側のCORS設定を行う、以下のライブラリを使ってみてください。
spatie/laravel-cors

Comments

[Pesonal]

ありがとうございます！
解決しました！

[aro10]

????