axios로 기본 인증을 보내는 방법

axios로 기본 인증을 보내는 방법

---

다음 코드를 구현하려고하는데 뭔가 작동하지 않습니다. 다음은 코드입니다.

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

401 오류를 반환합니다. Postman으로 할 때 기본 인증을 설정하는 옵션이 있습니다. 해당 필드를 채우지 않으면 401도 반환되지만 입력하면 요청이 성공합니다.

내가 뭘 잘못하고 있는지 아이디어가 있습니까?

다음은이를 구현하는 방법에 대한 API 문서의 일부입니다.

이 서비스는 헤더의 기본 인증 정보를 사용하여 사용자 세션을 설정합니다. 자격 증명은 서버에 대해 유효성이 검사됩니다. 이 웹 서비스를 사용하면 사용자 자격 증명이 전달 된 세션이 생성되고 JSESSIONID가 반환됩니다. 이 JSESSIONID는 웹 서비스 호출을위한 후속 요청에서 사용할 수 있습니다. *

---

기본 인증에 대한 "auth"매개 변수가 있습니다.

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

출처 / 문서 : https://github.com/mzabriskie/axios

---

질문의 코드가 인증되지 않는 이유는 헤더에 넣을 구성이 아닌 데이터 개체에서 인증을 전송하기 때문입니다. 당 Axios의 워드 프로세서 의 요청 방법 별칭 에 대한이 post있습니다 :

axios.post (url [, 데이터 [, 구성]])

따라서 코드가 작동하려면 데이터에 대해 빈 개체를 보내야합니다.

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');
});

@luschn이 언급 한 auth 매개 변수를 사용하는 경우에도 마찬가지입니다. 다음 코드는 동일하지만 대신 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');
});

---

어떤 이유로이 간단한 문제로 인해 많은 개발자가 차단됩니다. 나는이 간단한 일로 여러 시간 동안 고생했다. 이 문제는 여러 차원으로 :

1. CORS (다른 도메인 및 포트에서 프런트 엔드 및 백엔드를 사용하는 경우.
2. 백엔드 CORS 구성
3. Axios의 기본 인증 구성

CORS

개발을위한 설정은 localhost : 8081에서 실행되는 vuejs 웹팩 애플리케이션과 localhost : 8080에서 실행되는 스프링 부트 애플리케이션입니다. 따라서 프론트 엔드에서 나머지 API를 호출하려고 할 때 브라우저가 적절한 CORS 설정없이 스프링 백엔드에서 응답을받을 수있는 방법이 없습니다. CORS를 사용하여 최신 브라우저에있는 XSS (Cross Domain Script) 보호를 완화 할 수 있습니다. 내가 이해하는 바와 같이 브라우저는 XSS의 공격으로부터 귀하의 SPA를 보호하고 있습니다. 물론 StackOverflow에 대한 일부 답변은 XSS 보호를 비활성화하기 위해 크롬 플러그인을 추가하도록 제안했지만 실제로 작동하며 만약 그렇다면 나중에 불가피한 문제를 밀어 붙일 것입니다.

백엔드 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와 관련된 어떤 것도 넣을 필요가 없습니다.

프런트 엔드

이제 프런트 엔드에서 Authorization 헤더를 사용하여 axios 쿼리를 만들어야합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ status }}</p>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            status: ''
        },
        created: function () {
            this.getBackendResource();
        },
        methods: {
            getBackendResource: function () {
                this.status = 'Loading...';
                var vm = this;
                var user = "aUserName";
                var pass = "aPassword";
                var url = 'http://localhost:8080/api/resource';

                var authorizationBasic = window.btoa(user + ':' + pass);
                var config = {
                    "headers": {
                        "Authorization": "Basic " + authorizationBasic
                    }
                };
                axios.get(url, config)
                    .then(function (response) {
                        vm.status = response.data[0];
                    })
                    .catch(function (error) {
                        vm.status = 'An error occured.' + error;
                    })
            }
        }
    })
</script>
</body>
</html>

도움이 되었기를 바랍니다.

---

luschn과 pillravi가 제공하는 솔루션 은 응답에서 Strict-Transport-Security 헤더 를받지 않는 한 잘 작동합니다 .

withCredentials : true 를 추가하면 해당 문제가 해결됩니다.

  axios.post(session_url, {
    withCredentials: true,
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json"
    }
  },{
    auth: {
      username: "USERNAME",
      password: "PASSWORD"
  }}).then(function(response) {
    console.log('Authenticated');
  }).catch(function(error) {
    console.log('Error on Authentication');
  });

---

An example (axios_example.js) using Axios in 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);

Be sure in your project directory you do:

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

You can then test the Node.js REST API using your browser at: http://localhost:5000/search?queryStr=xxxxxxxxx

Ref: https://github.com/axios/axios

ReferenceURL : https://stackoverflow.com/questions/44072750/how-to-send-basic-auth-with-axios