Я пытаюсь реализовать следующий код, но что-то не работает. Вот код:

 var session_url = 'http://api_address/ api / session_endpoint';
      var username = 'пользователь';
      var password = 'пароль';
      var credentials = btoa (имя пользователя + ':' + пароль);
      var basicAuth = 'Basic' + учетные данные;
      axios.post (session_url, {
        заголовки: {'Authorization': + basicAuth}
      }). then (function (response) {
        console.log («Прошедшая проверку»);
      }). catch (function (error) {
        console.log ('Ошибка аутентификации');
      });

Возвращает ошибку 401. Когда я делаю это с помощью Postman, есть возможность установить базовую аутентификацию; если я не заполню эти поля, он также вернет 401, но если я это сделаю, запрос будет успешным.

Any ideas what I'm doing wrong?

Вот часть документации API о том, как это реализовать:

Эта служба использует информацию базовой аутентификации в заголовке для установления сеанса пользователя. Учетные данные проверяются на сервере. Использование этой веб-службы создаст сеанс с переданными учетными данными пользователя и вернет JSESSIONID. Этот JSESSIONID можно использовать в последующих запросах для вызовов веб-службы. *

Emmanuel

Ответов: 10

Ответы (10)

Для базовой аутентификации есть параметр auth:

auth: {
  username: 'janedoe',
  password: 's00pers3cret'
}

Источник / Документы: https://github.com/mzabriskie/axios

Пример:

await axios.post(session_url, {}, {
  auth: {
    username: uname,
    password: pass
  }
});

Причина, по которой код в вашем вопросе не аутентифицируется, заключается в том, что вы отправляете аутентификацию в объекте данных, а не в конфигурации, которая помещает его в заголовки. Согласно axios docs, псевдоним метода запроса для post:

axios.post (url [, data [, config]])

Следовательно, чтобы ваш код заработал, вам нужно отправить пустой объект для данных:

var session_url = 'http://api_address/api/session_endpoint';
var username = 'user';
var password = 'password';
var basicAuth = 'Basic ' + btoa(username + ':' + password);
axios.post(session_url, {}, {
  headers: { 'Authorization': + basicAuth }
}).then(function(response) {
  console.log('Authenticated');
}).catch(function(error) {
  console.log('Error on Authentication');
});

То же самое верно и для использования параметра auth, упомянутого @luschn. Следующий код эквивалентен, но вместо него использует параметр auth (а также передает пустой объект данных):

var session_url = 'http://api_address/api/session_endpoint';
var uname = 'user';
var pass = 'password';
axios.post(session_url, {}, {
  auth: {
    username: uname,
    password: pass
  }
}).then(function(response) {
  console.log('Authenticated');
}).catch(function(error) {
  console.log('Error on Authentication');
});

Hi you can do this in the following way

 var username = '';
    var пароль = ''

    const token = `$ {имя пользователя}: $ {пароль}`;
    const encodedToken = Buffer.from (токен) .toString ('base64');
    const session_url = 'http://api_address/ api / session_endpoint';

    var config = {
      метод: 'получить',
      url: session_url,
      заголовки: {'Authorization': 'Basic' + encodedToken}
    };

    axios (конфигурация)
    .then (функция (ответ) {
      console.log (JSON.stringify (response.data));
    })
    .catch (функция (ошибка) {
      console.log (ошибка);
    });

По некоторым причинам эта простая проблема блокирует многих разработчиков. Я много часов боролся с этой простой вещью. У этой проблемы столько же измерений:

  1. CORS (если вы используете интерфейс и серверную часть на разных доменах и портах.
  2. Конфигурация Backend CORS
  3. Базовая конфигурация аутентификации Axios

CORS

Моя установка для разработки - это приложение vuejs webpack, работающее на localhost: 8081, и приложение весенней загрузки, работающее на localhost: 8080. Поэтому при попытке вызвать rest API из внешнего интерфейса браузер не может позволить мне получить ответ от Spring Backend без правильных настроек CORS. CORS можно использовать для ослабления защиты Cross Domain Script (XSS), которая есть в современных браузерах. Насколько я понимаю, браузеры защищают ваш SPA от атаки XSS. Конечно, в некоторых ответах на StackOverflow предлагалось добавить плагин Chrome для отключения защиты XSS, но это действительно работает, И если бы это было так, это только подтолкнуло бы неизбежную проблему на потом.

Конфигурация Backend CORS

Вот как следует настроить CORS в приложении весенней загрузки:

Добавьте класс CorsFilter для добавления правильных заголовков в ответ на запрос клиента. Access-Control-Allow-Origin и Access-Control-Allow-Headers - самые важные вещи, которые нужно иметь для базовой аутентификации.

    public class CorsFilter implements Filter {

...
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;

        response.setHeader("Access-Control-Allow-Origin", "http://localhost:8081");
        response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
        **response.setHeader("Access-Control-Allow-Headers", "authorization, Content-Type");**
        response.setHeader("Access-Control-Max-Age", "3600");

        filterChain.doFilter(servletRequest, servletResponse);

    }
...
}

Добавьте класс конфигурации, который расширяет Spring WebSecurityConfigurationAdapter. В этом классе вы вставите свой фильтр CORS:

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
...
    @Bean
    CorsFilter corsFilter() {
        CorsFilter filter = new CorsFilter();
        return filter;
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {

        http.addFilterBefore(corsFilter(), SessionManagementFilter.class) //adds your custom CorsFilter
          .csrf()
          .disable()
          .authorizeRequests()
          .antMatchers("/api/login")
          .permitAll()
          .anyRequest()
          .authenticated()
          .and()
          .httpBasic()
          .authenticationEntryPoint(authenticationEntryPoint)
          .and()
          .authenticationProvider(getProvider());
    }
...
}

Вам не нужно помещать что-либо, связанное с CORS, в ваш контроллер.

Внешний интерфейс

Теперь во фронтенде вам нужно создать свой запрос axios с заголовком авторизации:




    
    Title
    
    


{{ status }}

Надеюсь, это поможет.

const auth = {
            username : 'test',
            password : 'test'
        }
const response =  await axios.get(yourUrl,{auth}) 

это работает, если вы используете базовую аутентификацию

Я только что столкнулся с этой проблемой, проводя небольшое исследование, я обнаружил, что значения данных должны быть отправлены как URLSearchParams, я делаю это так:

getAuthToken: async () => {
const data = new URLSearchParams();
data.append('grant_type', 'client_credentials');
const fetchAuthToken = await axios({
  url: `${PAYMENT_URI}${PAYMENT_GET_TOKEN_PATH}`,
  method: 'POST',
  auth: {
    username: PAYMENT_CLIENT_ID,
    password: PAYMENT_SECRET,
  },
  headers: {
    Accept: 'application/json',
    'Accept-Language': 'en_US',
    'Content-Type': 'application/x-www-form-urlencoded',
    'Access-Control-Allow-Origin': '*',
  },
  data,
  withCredentials: true,
});
return fetchAuthToken;

},

Если вы пытаетесь выполнить базовую аутентификацию, вы можете попробовать следующее:

const username = ''
const password = ''

const token = Buffer.from(`${username}:${password}`, 'utf8').toString('base64')

const url = 'https://...'
const data = {
...
}

axios.post(url, data, {
  headers: {
 'Authorization': `Basic ${token}`
},
})

Это сработало для меня. Надеюсь, что это поможет

Решение, предложенное luschn и pillravi, работает нормально, если вы не получите заголовок Strict-Transport-Security в ответе.

Добавление withCredentials: true решит эту проблему.

 axios.post (session_url, {
    withCredentials: правда,
    заголовки: {
      «Принять»: «application / json»,
      "Content-Type": "application / json"
    }
  }, {
    auth: {
      имя пользователя: «ИМЯ ПОЛЬЗОВАТЕЛЯ»,
      пароль: «ПАРОЛЬ»
  }}). then (function (response) {
    console.log («Прошедшая проверку»);
  }). catch (function (error) {
    console.log ('Ошибка аутентификации');
  });

Пример (axios_example.js) с использованием Axios в Node.js:

const axios = require('axios');
const express = require('express');
const app = express();
const port = process.env.PORT || 5000;

app.get('/search', function(req, res) {
    let query = req.query.queryStr;
    let url = `https://your.service.org?query=${query}`;

    axios({
        method:'get',
        url,
        auth: {
            username: 'xxxxxxxxxxxxx',
            password: 'xxxxxxxxxxxxx'
        }
    })
    .then(function (response) {
        res.send(JSON.stringify(response.data));
    })
    .catch(function (error) {
        console.log(error);
    });
});

var server = app.listen(port);

Убедитесь, что в каталоге вашего проекта вы делаете:

npm init
npm install express
npm install axios
node axios_example.js

Затем вы можете протестировать REST API Node.js в своем браузере по адресу: http://localhost: 5000 / search? QueryStr = xxxxxxxxx

Ссылка: https://github.com/axios/axios

Я использовал axios.interceptors.request.use для настройки базовых учетных данных. У меня есть приложение Backend Springboot (с SpringSecurity) с простой конечной точкой GET. Приложение Frontend VueJs и Backend работают на разных портах.

axios.js

import axios from "axios";

const api = axios.create({
  baseURL: "http://api_address",
  timeout: 30000,
});

api.interceptors.request.use(
  async (config) => {
    const basicAuthCredentials = btoa("xxxx" + ":" + "xxxx");
    config.headers.common["Authorization"] = "Basic " + basicAuthCredentials;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default api;

backend.js

import axios from "@/services/axios";

const BackendAPI = {

  listUsers: async () => {
    return axios({
      url: '/users',
      method: 'GET',
      responseType: 'json',
    });
  },
};

export { BackendAPI };

За ним следует компонент VUE Users.vue

...

Внутренняя пружина SecurityConfig.java с httpBasic в качестве аутентификации и отключенными cors и csrf.

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

  @Override
  protected void configure(HttpSecurity http) throws Exception {
    http.authorizeRequests()
        .antMatchers("/actuator/*")
        .permitAll()
        .anyRequest()
        .authenticated()
        .and()
        .httpBasic()
        .and()
        .cors()
        .disable()
        .csrf()
        .disable();
  }
}

2022 WebDevInsider