Поле заголовка запроса Авторизация несмотря на то, что Access-Control-Allow-Origin установлен в экспресс - PullRequest
Новая
       7

Поле заголовка запроса Авторизация несмотря на то, что Access-Control-Allow-Origin установлен в экспресс

0 голосов
/ 12 сентября 2018

Я создал приложение Vue.js с использованием Vue-cli и хочу использовать ограниченный API-интерфейс из бэкэнда.

Во избежание проблемы с CORS В моем приложении server.js я установил следующее: 

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Credentials", "true");
    res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
    res.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");

  next();
});

Однако, когда я делаю запрос с заголовком авторизации из моего компонента Vue.js: 

 axios.get('http://127.0.0.1:3000/api/article', headerConfig)
        .then( res => this.article = res.data)
         .catch(error => console.log(error))            
    }

Я все равно получаю: 

Failed to load http://127.0.0.1:3000/api/article: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Благодарим вас за помощь в разрешенииэтот.

1 Ответ

0 голосов
/ 16 сентября 2018

Вы должны явно разрешить использование заголовка «Авторизация» для запроса кросс-источника с упомянуто, что для заголовка Access-Control-Allow-Headers: 

res.header("Access-Control-Allow-Headers", "X-Requested-With, Authorization");

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

И это относится к заголовкам, которые вы отправляете только явно. Скажем, origin и access-control-request-headers генерируются браузером для предварительной проверки - пока вы не отправите их явно, вам также не нужно перечислять их для Access-Control-Allow-Headers в ответ.

...