Как убрать No 'Access-Control-Allow-Origin' от CORS, если в URL нету знака вопроса?

Question

[Артем Прохоров]

Наверное это странно, но у меня cors выдает ошибку доступа только в том случаи, если fetch в js имееют URL без знака вопроса. CORS настроен и мой Vue проект имеет доступ к серверу.
Так не пускает:

fetch('http://back.ru/role').then(res => { return res.json() })
        .then(data => { this.role = data.items });

А так впускает:

fetch('http://back.ru/role?').then(res => { return res.json() })
        .then(data => { this.role = data.items });

Причем я пробовал ставить method: "GET" предполагая, что может быть нужно явно указывать метод запроса и только так сервер его поймет(на сервере доступен get, post, delete, put). Но нет, даже так он выдает эту ошибку будто бы localhost:8080 не прописан в Access-Control-Allow-Origin, но он прописан. А со знаком вопроса все ок.
P.S.
POST, PUT, DELETE запросы не требуют ? в URL, там она выглядит примерно так http://back.ru/menu/4, так как на сервере включенно ЧПУ и все при этом работает.

Comments

[Сергей Соколов]

может, какое-то кэширование на стороне сервера отдаёт старый ответ ещё без заголовков на голый запрос, а с вопросом уже после обновления конфига?

Answer 1

[Rsa97]

В определённых случаях браузер делает preflight request. Сначала ресурс запрашивается методом OPTIONS, на который браузер рассчитывает получить ответ 200 с установленными CORS-заголовками. И только если этот запрос прошёл, то делается основной запрос.
Проверьте, что ваш сервер нормально отвечает на OPTIONS.

Comments

[Артем Прохоров]

'corsFilter' => [
                'class' => \yii\filters\Cors::class,
                'cors' => [
                    'Origin' => ['http://front.ru', 'http://localhost:8080'],
                    'Access-Control-Request-Method' => ['OPTIONS', 'POST', 'PUT', 'GET', 'DELETE', 'PATCH', 'HEAD'],
                    'Access-Control-Request-Headers' => ['*'],
                    'Access-Control-Allow-Credentials' => true,
                    'Access-Control-Max-Age' => 3600,
                    'Access-Control-Expose-Headers' => ['X-Pagination-Current-Page'],
                ],
            ],

Вот так выглядит моя настройка cors и после добавления OPTIONS ничего не поменялось.

[Rsa97]

kotcich, А сервер то на запрос OPTIONS отвечает? Посмотрите в консоли разработчика в браузере.

[Артем Прохоров]

Отвечает, если делаю запрос OPTIONS в fetch, то возвращает статус 200 и ошибок не выдает, но само собой так данные я не получу.

[Rsa97]

kotcich, А CORS-заголовки при этом возвращаются?

[Артем Прохоров]

Rsa97, Да, вот например

Access-Control-Allow-Methods: GET, POST, HEAD, OPTIONS

Но я убрал OPTION HEAD и PATCH запросы из 'Access-Control-Request-Method'
то есть сейчас доступны GET POST PUT DELETE, но возвращает он мне почему то GET, POST, HEAD, OPTIONS

[Артем Прохоров]

Rsa97, само собой остальные заголовки тоже есть.

[Kovalsky]

kotcich, вы показали всё что можно, кроме собственно Access-Control-Allow-Origin. К тому же локалхост нельзя туда писать насколько я знаю. То есть писать можно, но считаться это не будет)

[Артем Прохоров]

'Origin' => ['http://front.ru', 'http://localhost:8080'],

Эта строчка при настройки CORS в Yii2 и есть Access-Control-Allow-Origin, только пишется "Origin".
А на счет нельзя локалхост писать, ну как бы доступ то дается и данные я получаю и остальные методы запроса работают, просто этот знак вопроса в URL глаза мозолит, не должно быть так(по сути сам запрос он не меняет, но я хочу разобраться почему так, а не оставлять как есть с мыслью и так сойдет).

[Rsa97]

kotcich, Покажите, как выглядят в консоли браузера заголовки ответов на OPTIONS и следующий за ним основной запрос.