FlaskとChrome拡張を使って小規模フィルタリングシステムを構築したい

Question

実現したいこと

・FlaskとChrome拡張を使って小規模フィルタリングシステムを構築したい

前提

サイトブロックシステムをChromeの拡張機能とFlaskの判定サーバーで作っています。
URLを拡張からJavascripからGETを送ってFlaskの判定サーバーでreturnを使ってAllowかNoAllowを返しています。ですが、CROSの関係でjavascriptからGETリクエストを遅れません。送れるようになるスクリプトを教えてください。

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

 Access to XMLHttpRequest at 'http://127.0.0.1/?url=<exmaple.com>' from origin 'exmaple.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

該当のソースコード

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/', methods=["GET"])
def filtering():
    URL = request.args.get('url')
    if 'google.com' == URL:
        print("NoAllow")
        return 'NoAllow' 
    else:
        print("Allow")
        return 'Allow'
app.run(port="80", host="0.0.0.0",)

const BlockSite = chrome.runtime.getURL("message-page.html");
var URL = ""
URL = location.host;

var data_url = new XMLHttpRequest();

data_url.open('GET', 'http://127.0.0.1/?url=' + URL);
data_url.withCredentials = true;
data_url.setRequestHeader("Access-Control-Allow-Origin", "http://127.0.0.1");
data_url.send();
data_url.onreadystatechange = function() {
    if(data_url.readyState === 4 && data_url.status === 200) {
       console.log(data_url.responseText);
    }
}

試したこと

setRequestHeaderにAccsess-Control-Allow-Originをつけた
→改善せず

ajaxを使って構築しようとした
→分からなくて挫折した

補足情報（FW/ツールのバージョンなど）

環境はすべてローカルで動かしています。

Comments

[Lhankor_Mhy]

機能拡張のことは全然わからないのですが、この辺りの記事は参考になりますか？ https://qiita.com/not13/items/d805d66814a0bc81dc6a

Answer 1

頑張りましたが、現象が再現しませんでした。

たぶんですが、提示されていない情報が原因な可能性が高いです。

エラーメッセージからすると、Flask側ではなく、example.comのCORSエラーなので、こちらで対応できることはありません。

現象を確認するのに使ったコードは以下です。

"use strict";
    const BlockSite = chrome.runtime.getURL("message-page.html");
var URL = "<exmaple.com>"
console.log(URL)
// URL = location.host;
var data_url = new XMLHttpRequest();
data_url.open('GET', 'http://127.0.0.1/?url=' + URL);
data_url.withCredentials = true;
data_url.setRequestHeader("Access-Control-Allow-Origin", "http://127.0.0.1");
data_url.send();
data_url.onreadystatechange = function() {
    if(data_url.readyState === 4 && data_url.status === 200) {
       console.log(data_url.responseText);
    }
}

見て分かるとおりURLを直接入れています。

アクセス先は?url=%3Cexample.com%3Eで、?url=<exmaple.com>へのアクセスにはなりません。

マニフェストで特殊な指定をしているとか、こちらが思いもよらないことをしているかもしれませんので、出せる情報を追加で出していただければなにか回答できるかもしれません。

XMLHttpRequestは歴史がありますが、使いやすいとはお世辞にも言えません。(エラーハンドリングが面倒なので。)
可能ならfetchを使うと良いです。
他にjQeuryのajaxもありますが、どれも面倒なことは変わりないので、比較的新しいのを覚えた方が後々便利と思います。

Answer 2

この回答はGPT-4による自動生成回答です

CORSの問題を解決するために、Flask側で適切なヘッダーを設定してみてください。以下のようにafter_requestデコレータを使用して、すべてのレスポンスにCORSヘッダーを追加します。

from flask import Flask, request, make_response
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/', methods=["GET"])
def filtering():
    URL = request.args.get('url')
    if 'google.com' == URL:
        print("NoAllow")
        return 'NoAllow' 
    else:
        print("Allow")
        return 'Allow'

@app.after_request
def add_cors_headers(response):
    response.headers.add('Access-Control-Allow-Origin', '*')
    response.headers.add('Access-Control-Allow-Credentials', 'true')
    response.headers.add('Access-Control-Allow-Headers', 'Content-Type')
    response.headers.add('Access-Control-Allow-Methods', 'GET')
    return response

app.run(port="80", host="0.0.0.0",)

そして、JavaScript側ではwithCredentialsをfalseに設定し、setRequestHeaderでAccess-Control-Allow-Originを設定する必要はありません。

const BlockSite = chrome.runtime.getURL("message-page.html");
var URL = ""
URL = location.host;

var data_url = new XMLHttpRequest();

data_url.open('GET', 'http://127.0.0.1/?url=' + URL);
data_url.withCredentials = false;
data_url.send();
data_url.onreadystatechange = function() {
    if(data_url.readyState === 4 && data_url.status === 200) {
       console.log(data_url.responseText);
    }
}

これでCORSの問題が解決されるはずです。