axiosを用いたAPI呼び出しで"blocked by CORS policy"で呼び出し失敗

前提

フロントエンド初学者です。
Proofreading API (エンドポイント：https://api.a3rt.recruit.co.jp/proofreading/v2/typo) という公開されているAPIがあり、このAPIに対してaxiosでpostしたいと思っております。
CDNでVueやaxiosを読み込んで実装したいと考えております。

▼Proofreading API リファレンスサイト
https://a3rt.recruit.co.jp/product/proofreadingAPI/

実現したいこと

最終的には、画面からアップロードされたExcelファイルの内容を当該APIを呼び出すことで校正できればと思っておりますが、
ひとまずお試しで、テストで用意した文章をパラメータに当該APIを呼び出したいと思ってます。
ですので下記ソースでいうL108～L124の処理がひとまず通ればいいんですが、如何せん、フロント周りの知識が激薄で解決策が見いだせず、皆様の力をお借りしたいです。。。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5	<title>Proofread Document Tool</title>
6	<meta charset="UTF-8">
7	<link rel="preconnect" href="https://fonts.googleapis.com">
8	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9	<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap" rel="stylesheet">
10	<style>
11		* {
12			font-family: 'Noto Serif JP', serif;
13		}
14
15		body {
16			text-align: center;
17		}
18
19		h1.tool-title {
20			color: rgb(57, 57, 57);
21			padding-left: 1em;
22			font-weight: 900;
23		}
24
25		h2 {
26			color: rgb(57, 57, 57);
27		}
28
29		.note {
30			width: 50%;
31			text-align: center;
32			margin-left: auto;
33			margin-right: auto;
34		}
35
36		button {
37			margin-top: 1em;
38			background-color: darkgray;
39			border-radius: 20px;
40			border-color: rgb(40, 40, 40);
41			color: #fff;
42			padding: 10px 30px;
43			font-size: medium;
44		}
45	</style>
46</head>
47
48<body>
49	<div id="app">
50		<h1 class="tool-title">Proofread Document Tool</h1>
51		<h2>NOTE</h2>
52		<div clsss="note">
53			<p>Excelファイルにのみ対応しています。</p>
54		</div>
55		<h2>INPUT</h2>
56		<input type="file" id="excelFile" /><br>
57		<button v-on:click="doFormat">EXECUTE</button>
58	</div>
59</body>
60<script src="https://unpkg.com/vue@2.5.17"></script>
61<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
62<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
63<script src="./logics/checkExtension.js"></script>
64<script src="./logics/getAllCellAddressAndValue.js"></script>
65<script src="./logics/ProofReadingAPIInfo.js"></script>
66<script>
67	// ロードされ、Vueがグローバル変数として定義されているか確認
68	console.assert(typeof Vue !== 'undefined');
69	// ファイル不正メッセージ
70	const FILE_FORMAT_ERROR_MSG = "ファイルの拡張子が対応していない拡張子です。";
71
72	new Vue({
73		el: '#app',
74
75		data: {
76			// 校正対象文言リスト{シート名, セルアドレス, 値}のフォーマットで格納
77			cellValueList: [],
78			param: {}
79		},
80
81		methods: {
82			/**
83			 * 「チェック開始」ボタン押下時のイベント
84			*/
85			doFormat: function () {
86				const vm = this;
87				vm.errorList = [];
88
89				// 拡張子チェック
90				const fileName = document.getElementById("excelFile").files[0].name;
91				if (checkExtension(fileName) === false) {
92					alert(FILE_FORMAT_ERROR_MSG);
93					return;
94				}
95
96				vm.fileName = fileName;
97
98				// ファイル内容取得および整形の実処理部分
99				let fileReader = new FileReader();
100				fileReader.onload = function (event) {
101					// ファイル内容取得
102					let uint8 = new Uint8Array(event.target.result);
103					let workBook = XLSX.read(uint8, { type: "array" });
104
105					// 全てのシートの値の入ったセルのアドレスと値を取得
106					vm.cellValueList = getAllCellAddressAndValue(workBook);
107
108					// ProofReading APIリクエスト準備
109					let proofReadingAPIInfo = new ProofReadingAPIInfo();
110					// API URL取得
111					let url = proofReadingAPIInfo.getUrl(); // 「https://api.a3rt.recruit.co.jp/proofreading/v2/typo」が取得できます
112					// リクエストパラメータ追加
113					vm.param.apikey = proofReadingAPIInfo.getApiKey(); // 事前に取得したAPIキーを取得
114					vm.param.sensitivity = proofReadingAPIInfo.getSensitivity(); // 「midium」という値が取得されます
115					vm.param.sentence = "お試しです。";
116					// test
117					console.log(vm.param);
118
119					axios.defaults.withCredentials = true;
120					axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
121					axios.post(url, vm.param)
122						.then(res => {
123							console.log(res);
124						})
125				}
126
127				// ファイル読み込み
128				let file = document.getElementById("excelFile").files[0];
129				fileReader.readAsArrayBuffer(file);
130			},
131		}
132	});
133</script>
134
135</html>

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

下記のようなエラーメッセージが返却されます。
どうやらクロスオリジンとかいうやつが問題らしいというのはわかったんですが、その先が、わからず。。。

Access to XMLHttpRequest at 'https://api.a3rt.recruit.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.

試したこと

上記ソースでいうL119,L120が試行錯誤の結果ですが、最終的な結果は変わらず。。。

js
1axios.defaults.withCredentials = true;
2					axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';

退会済みユーザー

2023/01/24 00:42

質問者さん、無言ですが、回答したのでそれに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。解決したなら解決に役立った回答にベストアンサーをつけてクローズしてください。とにかく無言は NG です。

退会済みユーザー

2023/01/28 02:39

すみません、仕事で案件が大火事になってて寝て起きて仕事みたいな感じだったので、確認してる余裕がなかったです。。。役に立った/立たなかったも返せないぐらい忙しかったので。。。ご回答いただいた内容で当方でも動作を確認することができました。ありがとうございます。と言い訳ダラダラ言っても結局のところ返事が遅いと皆さんに迷惑をかけてしまうっていうことで、teratailの利用は極力控えようと思います。。

行動規範の内容に同意します

回答2件

ベストアンサー

axiosを用いたAPI呼び出しで"blocked by CORS policy"で呼び出し失敗

サーバー側が CORS に対応してないと、ブラウザからクロスドメインで XMLHttpRequest とか fetch API で普通に要求を出しても拒否されます。質問者さんのケースがそれだと思います。

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

上のエラーメッセージを見ると、ブラウザからプリフライトリクエスト（それが何かは CORS でググるなどして自分で調べてください）が出たが、サーバー側が CORS に対応してないのでそういう結果になったようです。

（質問のコードの 120 行目で要求ヘッダに Content-Type: application/json;charset=UTF-8 を含めるように設定しているようですが、そうするとプリフライトリクエストが出ます。プリフライトリクエストが出ない単純なリクエストにしても、サーバー側が CORS に対応してなければやはりダメです）

なので、ブラウザから普通に XMLHttpRequest とか fetch API で普通に要求を出したのでは何ともなりません。

ただし、質問に書いてあった「Proofreading API リファレンスサイト」の「SAMPLE REQUEST」のセクションの「3）正常時（callback パラメータ指定）」を見ると JSONP（JSON with Padding・・・script タグを使用してクロスドメインでデータを取得する仕組み）に対応しているようですので、JSONP を使ってみてはいかがですか？

jQuery.ajax を使うと、JSONP を利用してデータを取得するのがかなり簡単にできます。詳しくは以下の記事を見てください。

jQuery.ajax で JSONP
http://surferonwww.info/BlogEngine/post/2017/05/03/jsonp-by-using-jquery-ajax.aspx

【追記】

上に紹介した記事のように jQuaer.ajax で JSONP を使って取得できるか試してみました。

紹介した記事のコードとほぼ同様に、以下のようにして取得できます。apikey=xxxxx の xxxxx は自分で「Proofreading API リファレンスサイト」の「API KEY 発行」で取得したキーです。

「Proofreading API リファレンスサイト」の「SAMPLE REQUEST」のセクションの「3）正常時（callback パラメータ指定）」に書いてある callback=jQuery18308453692126555485_1471946187158 は jQuery が自動的に生成してくれるので不要です。

success: function (data) { ... の data には応答の JSON 文字列をデシリアライズした JavaScript オブジェクト（連想配列）が渡されます。

HTML
1<!DOCTYPE html>
2
3<html xmlns="http://www.w3.org/1999/xhtml">
4<head runat="server">
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6    <title></title>
7    <script src="Scripts/jquery-3.4.1.js"></script>
8    <script type="text/javascript">
9        //<![CDATA[
10        function btn_click() {
11            var address = "https://api.a3rt.recruit.co.jp/proofreading/v2/typo?apikey=xxxxx&sentence=システムの企画から開発・運用まで幅拾く関われまs。";
12
13            $.ajax({
14                url: address,
15                dataType: 'jsonp',
16                success: function (data) {
17                    alert(data.resultID + ', ' +
18                        data.inputSentence);
19                }
20            });
21        }
22        //]]>
23    </script>
24</head>
25<body>
26    <input type="button" value="検索" onclick="btn_click()" />
27</body>
28</html>