Не удалось выполнить успешный запрос авторизации от запроса Axios к бэкэнду Spring-security oauth2

Question

Привет, у меня есть этот запрос в Почтальоне.

Как мне сделать такой же запрос в Reactjs axios?

executeAuthenticationService(username, password) {
        return axios.get(`${API_URL}/oauth/token?grant_type=password&username=${username}&password=${password}`,
            { headers: { Authorization: 'Basic ' + window.btoa('my-trusted-client : secret') } } )            
            .catch(
                (error) => {
                    console.log('error: ' + error);
                }
            );
    }

Я пробовал выше, но это не работает.Спасибо

============== Обновление: ==============

Iследовал вашим предложениям и удалил пробелы.Преобразование без пробелов кажется точным, когда дело доходит до window.btoa, но я все еще не могу заставить его работать.

С этим кодом:

executeAuthenticationService(username, password) {
        return axios.get(`${API_URL}/oauth/token?grant_type=password&username=${username}&password=${password}`,
            { 
                headers: 
                { 
                    Authorization: 'Basic ' + window.btoa('my-trusted-client:secret'),
                    "Content-Type": "application/json"
                } 
            })            
            .catch(
                (error) => {
                    console.log('error: ' + error);
                }
            );
    }

Я даже жестко закодировал заголовок авторизации как:

Authorization: "Basic bXktdHJ1c3RlZC1jbGllbnQ6c2VjcmV0",

даже попробовал:

"Authorization": "Basic bXktdHJ1c3RlZC1jbGllbnQ6c2VjcmV0",

Ничего не работает, заголовок авторизации не появится в запросе.

Я получаю это на своей вкладке Chrome Network:

Я обнаружил, что могу добавить конфигурацию аутентификации в axios, поэтому я попробовал это:

executeAuthenticationService(username, password) {
        return axios.get(`${API_URL}/oauth/token?grant_type=password&username=${username}&password=${password}`,
            { 
                headers: 
                {                     
                    "Content-Type": "application/json"
                }, 

                auth: {
                    username: 'my-trusted-client',
                    password: 'secret'
                }
            })            
            .catch(
                (error) => {
                    console.log('error: ' + error);
                }
            );
    }

Тем не менее, заголовок авторизации отсутствует... Пожалуйста помоги.Спасибо.

============== Update2 ============= *

IЯ добавлю некоторую информацию.

моя конфигурация Springboot выглядит следующим образом:

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowCredentials(true)               
                .allowedHeaders("Authorization", "Cache-Control", "Content-Type", "Accept", "X-Requested-With", "Access-Control-Allow-Origin", "Access-Control-Allow-Headers", "Origin")
                .exposedHeaders("Access-Control-Expose-Headers", "Authorization", "Cache-Control", "Content-Type", "Access-Control-Allow-Origin", "Access-Control-Allow-Headers", "Origin")
                .allowedMethods("GET", "OPTIONS", "POST", "PUT", "DELETE", "PATCH");
    }
}

последний использованный мной запрос реагирования:

executeAuthenticationService(username, password) {
        return axios.get(`${API_URL}/oauth/token?grant_type=password&username=${username}&password=${password}`,
            { 
                headers: 
                {                     
                    "Content-Type": "application/json"
                }, 

                auth: {
                    username: 'my-trusted-client',
                    password: 'secret'
                }
            })            
            .catch(
                (error) => {
                    console.log('error: ' + error);
                }
            );
    }

Когда я нажимаюмою кнопку отправки из формы входа в систему

Я получаю это на вкладке Chrome (все):

А потом яполучите это на моей консоли Java:

2019-07-11 06:40:47.008 DEBUG 8068 --- [io-8080-exec-10] o.s.web.servlet.DispatcherServlet        : "ERROR" dispatch for OPTIONS "/error?grant_type=password&username=bill&password=abc123", parameters={masked}
2019-07-11 06:40:47.009 DEBUG 8068 --- [io-8080-exec-10] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped to public void org.springframework.web.servlet.handler.AbstractHandlerMethodMapping$EmptyHandler.handle()
2019-07-11 06:40:47.010 DEBUG 8068 --- [io-8080-exec-10] o.s.web.servlet.DispatcherServlet        : Exiting from "ERROR" dispatch, status 401

Я понятия не имею, что еще я пропустил.Пожалуйста помоги.Большое спасибо.

Answer 1

Может быть, вам не хватает метода для OPTIONS в ваших Access-Control-Allow-Methods?

Что означает, что вас могут отклонить еще до того, как вы создадите весь свой запрос?

Или, возможно, отключите ваш запрос OPTIONS как часть авторизации, аналогично тому, что было сделано здесь: https://www.baeldung.com/spring-security-cors-preflight

Answer 2

Вы можете попробовать это:

axios.get(`${API_URL}/oauth/token?grant_type=password&username=${username}&password=${password}`,
        {
          headers: {
            Authorization: "Basic " + window.btoa("my-trusted-client : secret"),
            "Content-Type": "application/json",
          },
        }
      )
      .then(resp => {})
      .catch(error => {
        console.log("error: " + error);
      });

Answer 3

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

вы можете попробовать установить заголовок для всех ваших запросов

Answer 4

Попробуйте это (убрать пробелы):

    headers: { 
        Authorization: 'Basic ' + window.btoa('my-trusted-client:secret') 
    }

Согласно здесь