Блог

Я получаю эту ошибку при вызове API.

Прежде чем помечать как «дубликат», пожалуйста, прочитайте это.

Мой интерфейс находится в ReactJS, и я использую axios для запросов API серверную часть в Laravel (v5, старый проект). Каждый API выдает эту ошибку: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Я уже сделал следующее,

• Добавлена политика cors для внутреннего сервера в качестве промежуточного программного обеспечения:

   class CORS {    
        /**
         * Handle an incoming request.
         *
         * @param  IlluminateHttpRequest  $request
         * @param  Closure  $next
         * @return mixed
         */
        public function handle($request, Closure $next) { 
            $headers = [
                'Access-Control-Allow-Origin' => '*',
                'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
                'Access-Control-Allow-Headers' => '*',
                // I have tried 'Authorization' instead of '*' also
                'Content-Type' => 'application/json',
            ];
            if ($request->getMethod() == "OPTIONS") {
                // The client-side application can set only headers allowed in Access-Control-Allow-Headers
                return Response::make('OK', 200, $headers);
            }
  
            return $next($request)
                ->header('Access-Control-Allow-Origin', '*')
                ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS')
                ->header('Access-Control-Allow-Headers', '*');
        }
   }
    

Есть ли какой-либо другой способ избавиться от ошибки CORS или я что-то здесь упускаю?

Обновите пример кода Axios в соответствии с запросом:

 axios.interceptors.request.use(function (config) {
// const token = get auth token from cookie/store
  config.headers = {
    'Authorization': token ? token : ''
  };
  return config;
});
  

Запрос Axios:

 Axios.get(myUrl)
  .then((response) => {
      // do something
  })
  .catch((err) => {
     // show error
  });