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

JavaScript

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

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

 

 

エラー内容

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.

 

なんかすごく長いし怖い。

CORSって強調されているけど何者?

 

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

 

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

 

 

 

今回やりたい事

PC(http://192.168.50.217)からJavaScriptAPIで
ESP32(http://192.168.50.230/property?height=1)へ接続して高さ情報を取得する。

 

 

 

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

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

 

割愛しましたが、heightはグローバル変数で既に50の値を格納してあります。普通にブラウザへ「http://192.168.50.230/property?height=1」を入力してみる。

 

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

 

 

 

 

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

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

 

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

 

 

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

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

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

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

 

 

 

 

対応

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

curl -I

C:\Users\xxxx>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>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だったので違うでしょっていうエラー。

なんでJavaScriptの時だけ出るんだよ。(涙)

勘弁してくれ。

コメント

タイトルとURLをコピーしました