Problem with CORS request, how to fix?

Question

CORS

When requesting another domain, it returns

has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The problem is in the back or I added something wrong in the headlines. Here are the headlines

const headers  = {
  "Accept": "application/json",
  "Access-Control-Allow-Origin": "*",
  "X-Requested-With": "XMLHttpRequest",
  "Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
}

here is the query

Axios.post('domen.com/api', dto, config) /* домен фековый */
      .then((res)=>console.log('Response',res))

Answer 1

headers of the form Access-Control-Allow-* are response headers, they should be sent by the server in response to the request
, moreover, if the request is OPTIONS (the browser sends itself before the main request to check rights), then the server must also respond with these headers, but with the status 204 and no body

Answer 2

Typically, an XMLHttpRequest request can only make a request within the scope of the current site. When trying to use a different domain/port/protocol, the browser gives an error.

Read more at https://learn.javascript.ru/xhr-crossdomain

Answer 3

For Flask

scope = Flask(__name__, static_url_path='')
# пришлось добавить эту штуку чтобы решить проблему с blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
CORS(scope)

in template.html

var x = []
        var y = []
        var url ='http://0.0.0.0:8228/scope/store_by_datetime?id_scope_dir=1&datetime_start=2020-10-17%2010:00&datetime_end=2020-10-17%2011:00'


        var req = new XMLHttpRequest();
        req.overrideMimeType("application/json");
        req.open('GET', url, true);
        req.onload  = function() {
            var jsonResponse = JSON.parse(req.responseText);
            // do something with jsonResponse
            console.log(jsonResponse)
            console.log(jsonResponse['result'].length)
            for(var k in jsonResponse['result']) {
                // console.log(k, jsonResponse['result'][k]);
                x.push(jsonResponse['result'][k]['date'])
                y.push(jsonResponse['result'][k]['value'])
                // console.log(x)
                var data = [
                    {
                        x: x,
                        y: y,
                        type: 'scatter'
                    }
                ];
                Plotly.newPlot('myDiv', data);
            }
        };
        req.send(null);