Laravel VueJS, Ax ios не видит заголовок CORS, но почтальон и браузер видят - PullRequest
Новая
       116

Laravel VueJS, Ax ios не видит заголовок CORS, но почтальон и браузер видят

0 голосов
/ 26 мая 2020

Давайте продолжим.

КРАТКОЕ ВВЕДЕНИЕ

При выполнении запроса Ax ios GET к моему API я получаю такую ​​проблему cors: 

Access to XMLHttpRequest at 'http://localhost:8080/api/my-endpoint/' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

ЧТО У МЕНЯ

У меня работает отдельное приложение VueJs и приложение Laravel 7 на Docker на порту 8080. Я точно знаю, что мои конечные точки работают на 100% нормально. Я также использую Laravel пакет cors .

CORS PACKAGE CONFIG 

paths' => ['*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

ЧТО Я МОГУ ВИДЕТЬ, ПРОИСХОДИТ

Когда я смотрю в заголовках ответов от моей Laravel конечной точки от Почтальона или от Chrome они оба содержат следующее:

Access-Control-Allow-Origin: *

Так что, судя по всему, заголовок есть, и он прилагается и к ответу.

ПРОБЛЕМА

Проблема здесь в том, что почему-то вообще не видно, когда Ax ios делает вызов.

Есть кто-нибудь знает, что здесь может происходить? Я пробовал разные решения со всех страниц StackOverflow, которые смог найти, но, похоже, ничего не работает.

Я понимаю, что мне здесь не хватает чего-то глупого, какой-то части настройки или какой-то конфигурации.

РЕДАКТИРОВАТЬ 1:

Я не уверен, должен ли я это видеть, но я не вижу, чтобы Ax ios выполнял предполетный запрос, поэтому я не вижу, идет ли заголовок Access-Control-Request-Method послал. Я не уверен, должен ли я это видеть, но я вижу, что это то, что пакет Laravel ищет в промежуточном программном обеспечении.

Ответы [ 2 ]

0 голосов
/ 07 июня 2020

У меня была такая же ошибка CORS при работе над проектом Vue. js. Вы можете решить эту проблему, отключив настройки безопасности вашего браузера (например, CHROME) для доступа к API с перекрестным происхождением. Это решение отлично сработало для меня. Это решение не требует создания фиктивного сервера или прокси-сервера.

Вы можете отключить настройки безопасности CHROME для доступа к apis из источника , введя следующую команду на терминале ma c:

/ Applications / Google \ Chrome .app / Contents / MacOS / Google \ Chrome --user-data-dir = "/ tmp / chrome_dev_session" --disable-web-security

После выполнения указанной выше команды на в вашем терминале появится новое окно chrome с отключенными настройками безопасности. Теперь запустите вашу программу (npm run serve или npm run dev) снова, и на этот раз вы не получите никаких ошибок CORS и сможете получить запрос GET, используя ax ios.

Надеюсь на это помогает!

0 голосов
/ 26 мая 2020

Благодаря apokryfos (см. Комментарии под моим вопросом) я нашел ответ. Мне было нелегко, и я до сих пор не уверен, что это способ go.

Надеюсь, это поможет другим людям.

Итак, сначала я посмотрел на ЭТО пост.

НАСТОЯЩАЯ ПРОБЛЕМА, КОТОРАЯ У МЕНЯ БЫЛА

Настоящая проблема заключалась не в настройке CORS, которая была сделана правильно с самого начала.

Реальная проблема заключалась в том, что chrome не отправлял предварительный запрос CORS. Что такое предполетный запрос? Хороший вопрос. Я отвечу на него в ближайшее время.

РЕШЕНИЕ, КОТОРОЕ МНЕ удалось найти

Давайте начнем с понимания того, что на самом деле представляет собой CORS PREFLIGHT REQUEST.

Предварительный запрос CORS - это Запрос CORS, который проверяет, понятен ли протокол CORS и знает ли сервер об использовании определенных методов и заголовков.

Это запрос OPTIONS, использующий три заголовка HTTP-запроса: Access-Control-Request-Method, Access -Control-Request-Headers и заголовок Origin.

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

Таким образом, обычно браузер пропускает предварительный запрос OPTIONS CORS для SIMPLE REQUESTS .

Сейчас в моей текущей среде разработки (и, возможно, в производственной, когда я sh свою работу над этой системой я завершу) npm run dev работает на localhost:8081, а мой Laravel backend API работает на Docker на localhost:8080

Вот почему мне всегда понадобится запрос CORS PREFLIGHT . Мне всегда будет нужен этот запрос, потому что, по крайней мере, для разработки у меня всегда будут мои серверные и внешние приложения, противоречащие политике CORS.

ЗАКЛЮЧЕНИЕ

Я все еще не уверен, что это правильный способ go об этом, но в этом есть смысл. По крайней мере, мне больше не мешает работа.

Конечно, настройки CORS, которые у меня есть в моих вопросах, будут изменены на более безопасные, как только я закончу. Не думаю, что разрешать что-либо откуда угодно - хорошая идея!

...