corsに悩まされるな。axios でcorsを攻略する

はじめに

いなたつアドカレの八日目の記事です

本記事には誤った内容が含まれています。もうしわけありません。記事の修正をお待ち下さい。

自分で建てたAPIとの通信でのCORSの回避方法についてですね。

CORS　いず　なに

Cross Origin Resource Sharing の略称です。
これは、どういつおりじんぽりしーでうんぬんかんぬん、とりあえず別のとこからリソースを取ってくるためのものですね。

じっそー

axiosの設定をするためのファイルを作りましょう。

setting.js

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:3000';
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';

ここで、

Access-Control-Allow-Originを設定する、ここでは「*」で全てにしているが好ましくはないハズ

Access-Control-Allow-Originはクロスオリジンからの読み出しを許可するためのものです。

これを設定し、axiosを使うときにsetting.jsをimportしてやることで、corsを回避することができます。
baseURLにlocalhost:3000を今回は設定しています。

urlとdataを用意しましょう

axios.post(url,data)
      .then(res => {
          console.log('成功')
      })
      .catch((err) => {
        console.log(err) // 失敗
      })

こんなかんじでAPIを叩きましょう。

おわりに

railsを使った時のcorsも書きます。。。