Vue.js/Express.js :: Как правильно передавать токен на сервер в заголовках?

Question

[Орк]

Стек: vue.js + express.js

В server.js настроен и работает CORS.

C API/CRUD запросами CORS работает прекрасно.

http.js
--------

import Axios from 'axios';

    export default Axios.create({

        withCredentials: true,
        baseURL: 'http://xxx.xxx.xxx.xxx:8080/api',
        timeout: 5000,
        headers: {

            'Content-type': 'application/json'
        }
    });

products.vue
---------------

import http from '../http.js';

    //...

    http.post('/auth/signin', data)
        .then(response => {

            const answer = response.data;
            
            if (response.data.state === 'success') {

               //...

            }
        })
        .catch(e => {

            console.log(e);
        });

server.js
----------

//...

    // Load CORS
    const cors = require('cors');
    const corsOptions = {

        credentials: true,
        origin: 'http://mydomen.ru',
        allowedHeaders: ['Content-Type'],
        optionsSuccessStatus: 200
    };
    app.use(cors(corsOptions));

    //...

Answer 1

[Антон Спирин]

Например так:

headers: {
  'Content-type': 'application/json',
  'Authorization': `Bearer ${token}`,
},

или можно, при получении токена, занести Authorization в заголовки по-умолчанию:

axios.defaults.headers.common.Authorization = `Bearer ${token}`;

Comments

[Орк]

Я так уже пробовал, браузер ошибку выдает

[Антон Спирин]

Матвей Уваров, посмотрите значение allowedHeaders в ваших настройках cors middleware, затем внимательно прочитайте текст ошибки.

[Орк]

Антон Спирин, да Вы правильно подметили)..
Добавил заголовок в блок CORS сервера и браузер перестал блокировать запросы