Проблема c CORS запросом, как исправить?

Question

[Danil Sitdikov]

При запросе на другой домен выдает

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.

Проблема в бэке или я в заголовках че то не то добавил. Вот заголовки

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"
}

вот запрос

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

Answer 1

[Дмитрий Беляев]

заголовки вида Access-Control-Allow-* - это заголовки ответа, их должен отправлять сервер в ответ на запрос
притом если запрос OPTIONS (браузер шлет сам перед основным запросом для проверки прав), то сервер должен так же ответить этими заголовками, но со статусом 204 и без тела

Comments

[Danil Sitdikov]

Окей, получается при корс запросе с фронта заголовки не нужны? Прост я понять не могу в чем проблема что запрос не прходит в том что бэк не дает доступа или то в запросе с фронта не нужных заголовков

[Дмитрий Беляев]

QuadradS, с клиента должен быть только заголовок Origin (откуда пришел запрос), если клиент в браузере, то браузер сам его отправит (X-Requested-With кстати тоже сам отправит)
а эти:
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
должны быть с сервера, притом из Access-Control-Allow-Headers можно смело убрать Access-Control-Allow-Headers и X-Requested-With (первый Вы и не должны отправлять, а второй разрешен по умолчанию)

Answer 2

[Павел Родионов]

Обычно запрос XMLHttpRequest может делать запрос только в рамках текущего сайта. При попытке использовать другой домен/порт/протокол – браузер выдаёт ошибку.

Подробнее читайте на https://learn.javascript.ru/xhr-crossdomain

Comments

[Сергей]

Спасибо. Ваша ссылка на документацию очень помогла.

Answer 3

[Николай Бараненко]

Для 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)

в 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);