2017-02-06 18 views
14

Я пытаюсь отправить запрос из одного порта локального хоста в другой. Я использую angularjs на интерфейсе и узле на бэкэнд.Ошибка CORS: поле заголовка запроса Авторизация не разрешена заголовками Access-Control-Allow-Headers в ответном предполетном ответе

Поскольку CORS запрос, в Node.js, я использую

res.header('Access-Control-Allow-Origin', '*'); 
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH'); 
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization'); 

и в файле angular.js службы, я использую

return { 
    getValues: $resource(endpoint + '/admin/getvalues', null, { 
     'get': { 
      method: 'GET', 
      headers:{'Authorization':'Bearer'+' '+ $localStorage.token} 
      } 
    }), 
} 

Я получаю следующая погрешность

Поле заголовка запроса Авторизация не разрешена заголовками Access-Control-Allow-Head в предполетном ответе.

Пожалуйста, помогите!

+0

вам нужно поставить авторизацию на сервере, чтобы и в FireFox оленьей коже это нужно авторизовать из –

+0

@ ÁlvaroTouzón, я поставил эту res.header ('Access-Control-Allow-Headers', ' Origin, X-Requested-With, Content-Type, Accept, Authorization '); на сервере –

ответ

15

Вы также должны добавить опции в разрешенные заголовки. браузер отправляет запрос перед полетом перед отправкой первоначального запроса. Ниже

res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS'); 

От источника https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS

В CORS, предполетный запрос с помощью метода OPTIONS передается, так что сервер может ответить, является ли приемлемым для отправки запроса с этими параметрами. Заголовок Access-Control-Request-Method уведомляет сервер как часть предпродажного запроса о том, что при отправке фактического запроса он будет отправлен с помощью метода запроса POST. Заголовок Access-Control-Request-Headers сообщает серверу, что при отправке фактического запроса он будет отправлен с настраиваемыми заголовками X-PINGOTHER и Content-Type. Теперь у сервера есть возможность определить, желает ли он принять запрос в этих обстоятельствах.

EDITED

Вы можете избежать этого ручной настройки с помощью npmjs.com/package/cors НОГО package.I использовал этот метод также, очевидно, и легко.

+0

Изменен res.header ('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH'); к res.header («Access-Control-Allow-Methods», «GET, PUT, POST, DELETE, OPTIONS»); все еще не работает –

+0

res.header ('Access-Control-Expose-Headers', 'Authorization'); // должен быть открыт, чтобы браузер имел разрешения на доступ к этому заголовку – vikas

+0

Решение, которое я дал для меня. это сработало для вас? если нет, вы также можете попробовать https://www.npmjs.com/package/cors. Я использовал этот метод, и это понятно и легко. – vikas

0

Если вы не хотите устанавливать библиотеку cors и вместо этого хотите исправить свой исходный код, другой, который вам не хватает, это то, что Access-Control-Allow-Origin: * неверен. При передаче токенов аутентификации (например, JWT) вы должны явно указать каждый URL-адрес, который вызывает ваш сервер. Вы не можете использовать «*» при выполнении токенов аутентификации.

9

Это проблема с API, вы не получите эту ошибку, если используете Postman/Fielder для отправки HTTP-запросов в API. В случае браузеров, для обеспечения безопасности, они всегда отправляют запрос OPTIONS/preflight в API перед отправкой фактических запросов (GET/POST/PUT/DELETE). Поэтому в случае, если метод запроса является OPTION, вам нужно не только добавить «Авторизация» в «Access-Control-Allow-Headers», но вам нужно добавить «OPTIONS» в «Access-Control-allow-methods» как Что ж. Это было, как я установил:

if (context.Request.Method == "OPTIONS") 
     { 
      context.Response.Headers.Add("Access-Control-Allow-Origin", new[] { (string)context.Request.Headers["Origin"] }); 
      context.Response.Headers.Add("Access-Control-Allow-Headers", new[] { "Origin, X-Requested-With, Content-Type, Accept, Authorization" }); 
      context.Response.Headers.Add("Access-Control-Allow-Methods", new[] { "GET, POST, PUT, DELETE, OPTIONS" }); 
      context.Response.Headers.Add("Access-Control-Allow-Credentials", new[] { "true" }); 

     }