Ajax using JavaScript by a chrome Extension - Error blocked cross-origin response with MIME type application/json

Question

Failed to get a respond after Ajax a simple Array from JS by chrome extension to my back-end "python"

error appears in console :

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://127.0.0.1:5000/test with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details

I've tried to check

https://www.chromestatus.com/feature/5629709824032768

and

https://www.chromium.org/Home/chromium-security/corb-for-developers

what i've learned from reading those two resources is why they have created CORB OR CORS but it doesn't suggest any example that would work for all dev or maybe i've got lost in the middle of it somehow , i'm not sure what i should do or add to my code

update: i've also gave those a try

How to stop CORB from blocking requests to data resources that respond with CORS headers?

Cross-Origin Read Blocking (CORB)

XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header

background.js

//added this part:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  fetch(request.input, request.init).then(function(response) {
    return response.text().then(function(text) {
      sendResponse([{
        body: text,
        status: response.status,
        statusText: response.statusText,
      }, null]);
    });
  }, function(error) {
    sendResponse([null, error]);
  });
  return true;
});

mainfest:

{
  "manifest_version": 2,
  "name": "testExtention",
  "description": "test extention",

  "browser_action" : {
    "default_title" : "hello computer!",
    "default_popup" : "popup.html"
  },

  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
  {
      "matches": ["https://www.example.com/*", "https://m.example.com/*"],
      "js": ["content.js"]
  }],

  "version": "1.0",
  "permissions": [ "tabs", "storage" ,"http://127.0.0.1:5000/*" ]
}

my js Ajax code:

const req = new XMLHttpRequest();
req.open('POST' , "http://127.0.0.1:5000/test");
// for cors
req.setRequestHeader("dataType",'json');
req.setRequestHeader('responseType','application/json');
req.setRequestHeader('Access-Control-Allow-Credentials' , 'true');
req.setRequestHeader('Access-Control-Allow-Origin','*');
req.setRequestHeader('Access-Control-Allow-Methods','GET');
req.setRequestHeader('Access-Control-Allow-Headers','application/json');

req.onload = ()=>{

  var res = JSON.parse(req.responseText);
  console.log('the response from the server = > ',res)
}
const data = new FormData();
data.append('x', y);
req.send(data);

python:

from flask import Flask
from flask_cors import CORS ,cross_origin
app = Flask(__name__)

cors = CORS(app)


@app.route("/test" ,methods = ["POST"] )
def req():
    y = request.form.get("x")
    z = jsonify({"success":y, 'headers': {
    'Access-Control-Allow-Credentials' : 'true',
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  }})
    z = request.form.get("x")

    print(f'ive recieved this \n\n {z}') // x is printed fine.

    return jsonify({"success":z})

i can see in the console that Python have received and printed the AJAX object but haven't send the response to the javaScript