CORSというウェブアプリのセキュリティのための仕組みがあり、例えばドメインが違うところに通信を行おうとすると、レスポンスが見られないようになったりします。
これは、ブラウザーがそのへんをきっちり制御していて、セキュリティを守るようになっているからです。
で、今回、私はElectronのアプリでCORSで守られたAPIを叩きたいと思ったのですが、Access-Control-Allow-Originにドメインが設定されていて、Electronからもレスポンスにアクセスできなかったのです。
Electronで実行されるとき、カレントドメインにはどうやらnullが設定されているようです。
本来の解決方法
調べた限り、こうするんじゃないかなー、という雰囲気を感じ取ったのですが、うまく動きませんでした。
webRequest.onHeadersReceivedでヘッダを書き換える
参考：https://imfly.gitbooks.io/electron-docs-gitbook/jp/api/session.html
要は、Access-Control-Allow-Origin: *が帰ってきたことにしてブラウザを騙してしまえばよいのです。
と思ったので、レスポンスヘッダを書き換える方法を試してみましたが、うまくいかず。
ハンドラが呼ばれていることも、cancel: trueが有効なことも確認できましたが、ヘッダーは書き換えられず。
const { session } = require("electron");
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
callback({
cancel: false,
responseHeaders: {
...details.responseHeaders,
"Access-Control-Allow-Origin": ["*"],
},
});
});
今回やった解決方法
CORSというのはブラウザー上で動くウェブアプリでのみ有効な決まりごとです。
ブラウザー外で通信する場合にはこの制約は働きません。
そこで、実際の通信はElectronのNode.jsプロセス(メインプロセスと呼ばれます)で行い、その結果をWebアプリプロセス(レンダラプロセスと呼ばれます)に渡す、というだいぶめんどうな方法で解決することにしました。
const { ipcMain } = require("electron");
const request = require("request");
ipcMain.on("fetch", async (event, url, params) => {
const body = await new Promise(ok => {
request(url, params, (_, _, body) => ok(body));
});
event.sender.send("fetch", JSON.parse(body));
});
const { ipcRenderer } = require("electron");
async function fetch(url, params) {
return new Promise(ok => {
ipcRenderer.once("fetch", (_, body) => ok(body));
ipcRenderer.send("fetch", url, params);
});
}
ただ、この雑実装だと、通信が同時に走るだけで混線する可能性があるので、もうすこしいい感じに実装する必要があるでしょう。とりあえず、自分はこれで十分でした。
なんで、onHeadersReceivedが使えなかったのか、とか、一般的にElectronアプリでCORSのURL叩くときどうしてるんだろうとか、疑問はいろいろ残りました。
以上です。よろしくお願いいたします。