APIに値をPOSTできません

前提・実現したいこと

ブラウザで利用できる簡易オンラインコンパイラを作りたい。
AceEditorでコードを受け取りJdoodleAPIにコードを送信し出力結果を得るという流れを実現させようとしています。
JdoodleAPIにテストコードを送信しましたがエラー（下に記述）が発生している状態です。
（JavaScript,APIを使用するのはほぼ初めで該当のソースコードの記述意図を答えられない場合がございます）

・JdoodleAPI Document
https://docs.jdoodle.com/compiler-api/compiler-api

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

以下、Googlechromeのコンソールで確認しました。

Console
1Failed to load resource: the server responded with a status of 415 ()
2POST https://api.jdoodle.com/v1/execute net::ERR_ABORTED 415

該当のソースコード

JavaScript
1async function compilerAPI(userCode) {
2
3const myHeaders = new Headers();
4myHeaders.append('Content-Type', 'application/json; charset=UTF-8');
5var raw = {
6  clientId: "***",
7  clientSecret: "***",
8  script: userCode,
9  stdin: "",
10  language: "java",
11  versionIndex: "0",
12};
13var send =  JSON.stringify(raw);
14
15var requestOptions = {
16
17  mode: 'no-cors',
18  method: "POST",
19  headers: myHeaders,
20  body: send,
21  redirect: "follow",
22
23};
24const url = 'https://api.jdoodle.com/v1/execute';
25
26var data = await fetch(url,requestOptions )
27.then((response) => response.text())
28.then((result) => result)
29.catch((error) => console.log("error", error));
30
31return data;
32}
33
34compilerAPI("public class Main{public static void main(String[] a){System.out.println(5555);}}");
35

試したこと

・415エラーについて調べたことろ、適切なフォーマットでないためサーバーがリクエストを拒否してるとのことでしたので以下のページのJava Exampleを実装しました。うまくコンパイルでき、出力結果を得ることができました。
したがって、該当のソースコードに問題があると考えています。
https://docs.jdoodle.com/compiler-api/compiler-api#java-example-for-execute-api-call

・以下のページに従ってmode: 'no-cors'を削除して実行すると別のエラーが発生しました。
https://stackoverflow.com/questions/66781784/post-https-api-jdoodle-com-v1-execute-neterr-aborted-415

Console
1Access to fetch at 'https://api.jdoodle.com/v1/execute' from origin 'http://localhost:8080' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
2script.js:27 POST https://api.jdoodle.com/v1/execute net::ERR_FAILED

よろしくお願いいたします。

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

回答1件

ベストアンサー

(手元でコードの確認とかを改めて行い、まるごと書き換えてます)

コードについて

もとのコードをブラウザで動作されるように実行すると、JDoodleへのAPI呼び出し時のリクエストヘッダーがtext/plainになっています。
これは、Fetch APIにおけるmode: no-corsの条件を満たさなくなるために、myHeaderでのContent-Typeの上書きが機能していないためだと思います。

※MDNより