Как мне отправить токен JWT в запросе axios GET?
Я новичок в Vue.js и хочу сделать запрос в компоненте к ограниченному api:
computed: {
token () {
return this.$store.getters.getToken;
},
...
created () {
axios
.get( this.BASE_URL + '/profile/me')
.then( res => {
this.profile = res.data;
console.info('profile is:', res.data);
})
.catch(error => console.info(error))
},
Проблема в том, что я не знаю, как включить токен в заголовок запроса. Поэтому неудивительно, что я получаю в ответ ошибку 401.
И когда я пытаюсь
axios.defaults.headers.common['Authorization'] = this.token;
перед запросом на получение я получаю OPTIONS /profile/me вместо GET /profile/me в журналах сервера.
Как я могу это исправить?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Запрос Axios get() принимает два параметра. Итак, рядом с URL-адресом вы также можете указать JWT.
axios.get(yourURL, yourConfig)
.then(...)
В вашем случае yourConfig может быть примерно таким
yourConfig = {
headers: {
Authorization: "Bearer " + yourJWTToken
}
}
Также вы можете прочитать о том, что можно добавить в свой конфиг, здесь https://github.com/axios/axios. Просто найдите "Запросить конфигурацию"
Вместо того, чтобы изменять поведение сервера, вы можете подделать домен, установив это расширение на свой локальный компьютер (chrome.google.com/webstore/detail/allow-control-all ow-origi /…). Настройте свой сервер для приема запросов из другого домена, что приведет к какой-либо атаке CSRF. Кроме того, не забудьте выключить это расширение после разработки.
Это работает для меня, попробуйте как -
let JWTToken = 'xxyyzz';
axios
.get(this.BASE_URL + '/profile/me', { headers: {"Authorization" : `Bearer ${JWTToken}`} })
.then(res => {
this.profile = res.data;
console.info('profile is:', res.data);
})
.catch(error => console.info(error))
Я получаю эту ошибку: Failed to load http://127.0.0.1:3000/profile/me: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.. Любые идеи?
Когда мы используем настраиваемые заголовки запросов, мы получим предварительную проверку CORS. Нам нужно ответить на эту предварительную проверку CORS соответствующими заголовками CORS, чтобы это сработало. например - `{res.setHeader (" Access-Control-Allow-Origin "," * "); res.setHeader ("Контроль доступа-Разрешить-Учетные данные", "истина"); res.setHeader («Доступ-Контроль-Разрешить-Методы», «ПОЛУЧИТЬ, ЗАГОЛОВОК, ОПЦИИ, POST, PUT»); `
Я знаю. У меня есть экспресс app.use(function(req, res, next) { res.setHeader("Access-Control-Allow-Origin", "*"); res.setHeader("Access-Control-Allow-Credentials", "true"); res.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); res.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"); next(); });, но сообщение об ошибке все равно появляется. Есть идеи, как это исправить?
если вы используете webpack с приложением vue, попробуйте это - github.com/axios/axios/issues/853#issuecomment-374846375, он решит проблему, настроив прокси, чтобы избежать CORS
Извините, не знаю, как это выразить. фрагмент. Я создал приложение, используя vue.cli. И в webpack.config.js есть /node_modules/@vue/cli-service, но когда я вставляю туда "devServer":{ "proxy": { "/": { "target": 'http://127.0.0.1:3000', "pathRewrite": { '^/': '' }, "changeOrigin": true, "secure": false } } }, после перезагрузки сервера vue все равно появляется та же ошибка. Что здесь могло быть не так?
Я получаю
OPTIONS /profile/me 200в журнале обслуживания. и нет запроса GET. Также браузер жалуется на «Авторизация не разрешена», несмотря на то, что у меня есть это в expess:app.use(function(req, res, next) { res.setHeader("Access-Control-Allow-Origin", "*"); res.setHeader("Access-Control-Allow-Credentials", "true"); res.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); ...в экспресс-настройках.