Python3のFlaskでAPIを作ってJavaScriptで叩いたら「CORS ヘッダー ‘Origin’ を追加できなかった」という理由でブロックされた

Question

前提

Firefoxでアドオンを作って、そこからjQueryを使ってAPIを叩こうとしているのですが、エラーを吐いて、サーバー側にデータが届きません。

実現したいこと

APIにデータをPOSTする

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

クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://localhost:5000/video にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダー ‘Origin’ を追加できなかった)。

該当のソースコード

$.post("http://localhost:5000/video", JSON.stringify({"videoid": videoid, "playing": !ispaused}));

試したこと

• jQueryとアドオンのソースコードを開発者ツールのコンソールにコピペして実行してみると正常に実行でき、データも届いていました。
• $.postの代わりに$.ajaxを使っても変わりませんでした。
• jQueryの代わりにXMLHttpRequestを使っても変わりませんでした。

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

APIはPython3とFlaskで作りました。CORS対応はしてあります。
Firefoxのバージョンは106.0です。

追記(2022/11/04 16:56)

Flask側でのCORS対応はプログラム冒頭で次のようにしています。

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

app = Flask(__name__)
CORS(app)

Comments

[maisumakun]

「Flask側での」CORS対応はどのようにしていますか？

[退会済みユーザー]

コメントありがとうございます。今追記しました。

Answer 1

拡張機能のmanifest.jsonを次のように変更すると上手く行きました。
変更前:

{
    "manifest_version": 2,
    "name": "hogehoge",
    "version": "0.0.2",
    "description": "hogehogefugafuga.",
    "content_scripts": [
        {
            "matches": ["*://*.example.com/*"],
            "js": ["jquery.js", "main.js"]
        }
    ]
}

変更後:

{
    "manifest_version": 3,
    "name": "hogehoge",
    "version": "0.0.2",
    "description": "hogehogefugafuga.",
    "host_permissions": [ 
        "http://localhost:5000/*"
    ],
    "content_scripts": [
        {
            "matches": ["*://*.example.com/*"],
            "js": ["jquery.js", "main.js"]
        }
    ]
}