JavaScriptAPIで値を取得したいだけなのにCORSエラーがでる

農業用ビニールハウス自動化を進めています。
各ビニールハウスへ設置したモータをスマホから動かす為に、PCをWEBサーバにして
モータを直接動作させるESP32の情報を集約させておきます。
[PC(ブラウザ)]-[PC(http)]-[ESP32(http)]-[モーター]
※PCは同一機です。

[PC(http)]-[ESP32(http)]の接続部分構築で問題が起きました。

エラー内容と対処方法を書き残します。

エラー内容
今回やりたい事
レスポンスを返すESP32のコード
リクエストを出すJavaScriptAPIのコード
対応
接続成功
JavaScriptはどうやって覚える？
気付き

エラー内容

Access to fetch at 'http://192.168.50.230/property?height=1'
from origin 'http://192.168.50.217' has been blocked by CORS
policy: 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.

なんかすごく長い。
‘Access-Control-Allow-Origin’と書いてあるけど意味がわからない。

後半CORSって強調されているけど何者（こ、コロス・・！？）
やっぱ怖いな。

そして続けてこの出力。

GET http://192.168.50.230/property?height=1 net::ERR_FAILED 200

エラーなのはわかるけど200って出てる！成功なんじゃないの！？？

今回やりたい事

PC（http://192.168.50.217）からJavaScriptAPIで
サーバ（http://192.168.50.230/property?height=1）へ接続して高さ情報を取得する。

サーバ自体はArduinoの言語で動いています。
全コードまでは長いので省略しますが、/propertyへのアクセスがあった際に処理する関数のみ表示します。

レスポンスを返すESP32のコード

void slash_property(void){
String _msg;
//高さの確認
if (server.hasArg("height")){
_msg = height;
}
server.send(200, "text/plain; charset=utf-8", _msg);
}

割愛しましたが、heightはグローバル変数で既に50の値を格納してあります。
heightがGETの値の“height”と戻り値のheightで２つあるので紛らわしいです。（スミマセン）
普通にブラウザへ「http://192.168.50.230/property?height=1」を入力してみる。

想定通りheightの「50」が返ってきます。

リクエストを出すJavaScriptAPIのコード

fetch(`http://192.168.50.230/property?height=1`)
.then((res)=&amp;amp;gt;{
return( res.text() );
})
.then((text)=&amp;amp;gt;{
console.log(text);
})
.catch((error)=&amp;amp;gt;{
alert("エラーが発生しました");
console.error(error);
});

ここで冒頭に書いたエラーがでました。

200が返っているので応答は問題ないはず。（汗汗汗）

ここには書いていませんが、モータを動かす指示もAPIで問題なく通るので
ESP32はちゃんと受け取って、レスポンスしているんですよね。

APIのコードが悪いのかと思い複数のコード試しましたが治りません。

エラー内容に向き合いました。

対応

コマンドプロンプトでレスポンスヘッダを確認する。

curl -I

C:\Users\xxxx&amp;amp;gt;curl -I http://192.168.50.230/property?height=1
HTTP/1.1 200 OK
Content-Type: text/plain; charset=utf-8
Content-Length: 2
Connection: close

「Access-Control-Allow-Origin」がありません。

ESP32にレスポンスヘッダを追記する。

void slash_property(void){
String _msg;
//高さの確認
if (server.hasArg("height")){
_msg = height;
}

//CROSエラー回避のヘッダを追加
server.sendHeader("Access-Control-Allow-Origin", "*");
server.sendHeader("Access-Control-Allow-Headers", "Content-Type");

server.send(200, "text/plain; charset=utf-8", _msg);
}

「Access-Control-Allow-Headers」も追加しておきます。

コマンドプロンプトでレスポンスヘッダを確認する。

curl -I

C:\Users\xxxx&amp;amp;gt;curl -I http://192.168.50.230/property?height=1
HTTP/1.1 200 OK
Content-Type: text/plain; charset=utf-8
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type
Content-Length: 2
Connection: close

追加した分ヘッダが増えています。

接続成功

もう一度JavaScriptAPIで接続します。

うまくいきました。

結局、接続元ドメインが192.168.50.217で接続先が192.168.50.230だったので違うでしょっていうエラー。
接続元を判断するのがAccess-Control-Allow-Originの項目で、
この値を

にすることでどの接続元でもいいですよ！ということになっている。（と解釈）

なんでJavaScriptの時だけ出るんだよ。（涙）
勘弁してほしい。

JavaScriptはどうやって覚える？

プログラムのコードが読めないと、参考にしているコードの理解や自分でプログラムを書くときに時間がかかってしまいます。
そんな時は基礎から学ぶと応用もできるようになり自分の作りたいプログラムがスムーズに作れるようになります。

無料でやるならネット上の学習サイトを参考にするといいです。
こちらはJavaScriptの基礎から説明している無料のWEBサイトになります。

>>基礎から学べるWEBサイトを見てみる

過去にネットでの学習でつまずいた方には専門書をオススメします。
本なら基礎から学べる事はもちろん、読者視点で分かりやすい解説になっています。
一人で集中してコツコツ進めたい方は書籍を試してください。