Axios에서 사용자 이름과 암호를 설정하는 방법 메서드 헤더 가져 오기

Question

내 반응 프로젝트에서 Axios를 통해 서버에서 일부 데이터를 가져 오려고합니다. 브라우저에 URL을 입력하고 브라우저에 들어가면 사용자 이름과 암호를 묻고 나면 json 데이터를 볼 수 있습니다. 하지만 get 메서드에서 axios 헤더에 암호와 사용자 이름을 설정하는 방법을 모른다. 나는 많은 포럼과 페이지에서 그것을 찾았는데, 특히이 링크는 나를 도왔다 : Sending axios get request with authorization header. 그래서 마침내 나는 (전에 많은 것들을 시도했지만 더 혼란 스러웠다.)

componentDidMount() { 
    axios.get('http://my_url/api/stb', {auth: { 
    username: 'usrnm', 
    password: 'pswrd' 
}}) 
    .then(function(response) { 
     console.log(response.data); 
     console.log(response.headers['Authorization']); 
    }).catch(err => console.log(err)); 
} 

나는 아무것도 얻을 수 없다. 나는 콘솔에서이 오류를 얻을 :

에는 헤더 여부를 정확한 데이터가없는 경우 - 서버의 대답은 이 포함됩니다 HTTP 인증되지 않은 상태 401 :

Error: Network Error 
Stack trace: 
createError@http://localhost:3000/static/js/bundle.js:2195:15 
handleError@http://localhost:3000/static/js/bundle.js:1724:14 

사실, API 문서가이 단어를 언급 및 메시지 :

< {"status":"ERROR","results":"","error":"401 Unauthorized request"} 

성공 확인을 위하여이다 충분한 API에 대한 모든 요청 헤더에 추가 :

Authorization: Basic <base64encode("login":"password")> 

이 이상한 것은, 난 우체부를 사용하는 경우, 응답이 나에게 본문 섹션 아래에 "401 인증되지 않은"응답을 보낼 수있다. 하지만 브라우저의 콘솔에서 401 오류를 볼 수 없습니다.

Answer 1

좋아, 해결책을 찾았습니다. 내 질문에 대해 쓴 코멘트에서 언급했듯이, cors 문제도있었습니다. 그리고 나는 내가 올바르게 인증 할 수 없기 때문에 cors 문제가 나타났습니다. 그래서 cors는 내 질문의 성격 결과입니다. 뭐든간에 .. 나는 내 솔루션을 공유하고 싶다. 반응과 액시 오즈로 명확한 인증 예제를 찾을 수 있기 때문에 다른 사람들에게 도움이되기를 바란다.

나는 NPM을 통해 기본-64 라이브러리를 설치 :

componentDidMount() { 
     const tok = 'my_username:my_password'; 
     const hash = Base64.encode(tok); 
     const Basic = 'Basic ' + hash; 
     axios.get('http://my_url/api/stb', {headers : { 'Authorization' : Basic }}) 
     .then(function(response) { 
      console.log(response.data); 
      console.log(response.headers['Authorization']); 
     }).catch(err => console.log(err)); 
    } 

을 그리고 작은 따옴표로 승인을 얻고 URL이 암호로 보호되지이다