APIに値をPOSTできません

Question

前提・実現したいこと

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

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

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

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

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

該当のソースコード

async function compilerAPI(userCode) {

const myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json; charset=UTF-8');
var raw = {
  clientId: "***",
  clientSecret: "***",
  script: userCode,
  stdin: "",
  language: "java",
  versionIndex: "0",
};
var send =  JSON.stringify(raw);

var requestOptions = {

  mode: 'no-cors',
  method: "POST",
  headers: myHeaders,
  body: send,
  redirect: "follow",

};
const url = 'https://api.jdoodle.com/v1/execute';

var data = await fetch(url,requestOptions )
.then((response) => response.text())
.then((result) => result)
.catch((error) => console.log("error", error));

return data;
}

compilerAPI("public class Main{public static void main(String[] a){System.out.println(5555);}}");

試したこと

・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

Access 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.
script.js:27 POST https://api.jdoodle.com/v1/execute net::ERR_FAILED

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

Answer 1

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

コードについて

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

※MDNより

目的について

ブラウザで利用できる簡易オンラインコンパイラを作りたい。

上記理由により、Fetch APIで直接APIコールするのは不可能と考えたほうが良さそうです。
（一泊おいて考えたら、ID/Secretを両方使用してコールする機能をブラウザ上で実行出来るのはアカウント利用者側にとっての不利益も大きいし、塞がれてて然るべきではあります）

もし仮に、静的HTML以外の手段を取れるのであれば、バックエンドで「JDoodle APIをコールして」「結果を中継する」ようなAPIを1個だけ自作するような形式で、簡易的なWebアプリとして実装する必要があります。

Comments

[Monkuma]

ご回答ありがとうございます！
試してみましたが変わらずエラーですね...????

[Monkuma]

詳しく調べていただきありがとうございます！
数週間くらい悩んでいたので本当に助かりました。

バックエンド側で処理を実装しようと思います(^^)