Zenn
Open3

Electronに埋め込んでいるwebviewでCORSエラー出ちゃった時

Electron
React
#
CORS
#
web3
#
WebView
pluto0004pluto0004

React + electronのアプリで、外部サイトをwebviewを使って埋め込んでいる。
単純にそのサイトを表示させるだけなら問題ないが、今回はユーザーのアクションによってelectron側とサイト側でやりとりが発生するため、サイトによってCORSエラーが発生してしまった（具体的には、wallet connect をさせたかった）。

pluto0004pluto0004

色々調べてみると、どうやらrequestを送る前にheaderをwebRequest.onBeforeSendHeadersを使って上書きすれば良いとのこと。

pluto0004pluto0004

mainプロセスのところに追記するんだけど、具体的にはこんな感じ。

// このアプリでは、urlはelectronのアプリから渡されるので動的にfilterを作れるようにしている
// 特定のサイトであればハードコードでもいいかも

    const target = new URL(url); 
    const domainName = target.hostname;

    const filter = {
      urls: [`*://*.${domainName}/*`],  // e.g. '*://*.google.com/*'
    };
    session.defaultSession.webRequest.onBeforeSendHeaders(
      filter,
      (details, callback) => {
        // referrerというプロパティを使う。ただし一番最後の`/`が邪魔なので切りとる
        details.requestHeaders.Origin = details.referrer.slice(0, -1);
        callback({ requestHeaders: details.requestHeaders });
      }
    );