axios を使って http post リクエストがうまくできない

前提・実現したいこと

フロントエンド初心者です。

Proofreading API (https://a3rt.recruit-tech.co.jp/product/proofreadingAPI/]) という公開されているAPIがあり、このAPIを利用する簡単な画面を実装しようとしています。

APIの機能としては、下記のようなリクエストを送るとその下のjsonが返ってくるものです。

https://api.a3rt.recruit-tech.co.jp/proofreading/v2/typo?
apikey=AAAAAAAAAAAAAA&
sentence=システムの企画から開発・運用まで幅拾く関われまs

json
1{
2	"resultID": "874778e99a36",
3	"status": 1,
4	"message": "pointed out",
5	"inputSentence": "システムの企画から開発・運用まで幅拾く関われまs。",
6	"normalizedSentence": "システムの企画から開発・運用まで幅拾く関われまs。",
7	"checkedSentence": "システムの企画から開発・運用まで幅 <<拾>> く関われま <<s>> 。",
8	"alerts":[
9		{"pos": 17, "word": "拾", "score": 1.0, "suggestions":["広", "全", "深"]},
10		{"pos": 23, "word": "s", "score": 0.999999883978465, "suggestions":["す", "し", "い"]}}
11	]
12}
13

画面の実装としては、テキストボックスに校正したいテキストを入れてボタンをクリックすると間違えていると思われる箇所にマークをつけて返してくれるようなものをイメージしています。(checkedSentence を表示するイメージ)

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

Javascriptのライブラリである aios を利用して http通信をしようとしていますが、リクエストパラメータ(具体的には apikey)が足りないと言われてしまいます。初歩的なミスかもしれませんが、原因が分かればご教授いただけると幸いです。

コンソールログは下記。

{status: 1000, message: "apikey is null"}
message: "apikey is null"
status: 1000

該当のソースコード

ソースコードとしては下記になります。

html
1<div id='app'>
2    <p>テキスト：<br>
3      <textarea name="comment" cols="40" rows="8" v-model="sentence"></textarea>
4    </p>
5    <button v-on:click="sendAPI">
6    send
7    </button>
8  </div>
9  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.6/dist/vue.js"></script>
10  <script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
11  <script src="js/main.js"></script>

js/main.js

javascript
1var app = new Vue({
2    el: '#app',
3    data: {
4      apikey: 'XXXXXXXXXXXXXXXXXXXXXXX',
5      sentence: ''
6    },
7    headers: {
8      "Access-Control-Allow-Origin": "*",
9    },
10    methods: {
11      sendAPI: function(){
12        axios.post('https://api.a3rt.recruit-tech.co.jp/proofreading/v2/typo/', this.data, this.headers)
13        .then(function(response) {
14          console.log(response.data)
15        })
16        .catch(function(error) {
17          console.log(error)
18        })
19      }
20    }
21  })

修正後

コメントをいただき、下記のように変更しましたが、別途エラーが出てしまいました。

html
1<div id='app'>
2    <p>テキスト：<br>
3      <textarea name="comment" cols="40" rows="8" v-model="data.sentence"></textarea>
4    </p>
5    <button v-on:click="sendAPI">
6    send
7    </button>
8  </div>
9  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.6/dist/vue.js"></script>
10  <script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
11  <script src="js/main.js"></script>

javascript
1var app = new Vue({
2    el: '#app',
3    data: {
4      data: {
5          apikey: 'XXXXXXXXXXXXXXXXXXXXXXX',
6          sentence: ''
7      }
8    },
9    methods: {
10      sendAPI: function(){
11        axios.post('https://api.a3rt.recruit-tech.co.jp/proofreading/v2/typo/', this.data)
12        .then(function(response) {
13          console.log(response.data)
14        })
15        .catch(function(error) {
16          console.log(error)
17        })
18      }
19    }
20  })

コンソールでのエラーは下記。

Access to XMLHttpRequest at 'https://api.a3rt.recruit-tech.co.jp/proofreading/v2/typo/' from origin 'null' 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.
main.js:16 Error: Network Error

検索結果を参考に見よう見まねで下記のように書き換えても同じエラーでした。

javascript
1var app = new Vue({
2    el: '#app',
3    data: {
4      data: {
5          apikey: 'XXXXXXXXXXXXXXXXXXXXXXX',
6          sentence: ''
7      },
8      headers: {
9        "Access-Control-Allow-Origin": "*"
10      }
11    },
12    methods: {
13      sendAPI: function(){
14        axios.post('https://api.a3rt.recruit-tech.co.jp/proofreading/v2/typo/', this.data, this.headers)
15        .then(function(response) {
16          console.log(response.data)
17        })
18        .catch(function(error) {
19          console.log(error)
20        })
21      }
22    }
23  })