Axios 기본 승인이 Reactjs를 통과하지 못함

처음으로 여기에 묻습니다.Axios 기본 승인이 Reactjs를 통과하지 못함

일부 승인이 필요한 팀이 만든 폭풍우 앱에 대한 GET 호출을하려고합니다. 우체부를 사용하는 경우 테스트하고 일부 구성 후에는 모든 컬이

curl --verbose --user ID:SECRET -H "Accept: application/json" https://api.stormpath.com/v1/tenants/current 
... 
< HTTP/1.1 302 
< Cache-Control: private, no-cache, no-store, max-age=0, no-transform 
< Date: Tue, 10 Jan 2017 09:27:14 GMT 
< Location: https://api.stormpath.com/v1/tenants/TENANTID 
< Pragma: no-cache 
< Stormpath-Request-Id: f8e4dee0-d716-11e6-9795-22000aa92aa2 
< Strict-Transport-Security: max-age=31536000; includeSubDomains; preload 
< X-Frame-Options: SAMEORIGIN 
< Content-Length: 0 
< Connection: keep-alive 
< 
* Connection #0 to host api.stormpath.com left intact

을했다 사용하여 200

Results of API call in Postman

했다하지만 React에 Axios을 통해 전화를 걸하려고 할 때 나는 401를 얻을 수 있습니다 오류.

XMLHttpRequest cannot load https://api.stormpath.com/v1/tenants/current. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 401.

이 내가 사용하는 것입니다 :

axios({ 
method: 'get', 
url: "https://api.stormpath.com/v1/tenants/current", 
auth: 
{ 
    username: 'api ID', 
    password: 'api Secret' 
} 
})

나는 이유를 알고하지 않습니다하지만 내가 가진 응답에 따라 사용자 이름과 암호를 제공 아니에요.

비슷한 질문이 있지만 아직 답변이 없습니다. 이를 읽어 주셔서

Basic authentication : failure supergaent+OSX , success on superagent+Redhat , success on Postman+OSX,

감사의

Cannot Basic Auth from React App with Axios or SuperAgent

Reactjs Axios/Spring boot security

출처

2017-01-09 Nike Adeyemi

아마 잘못된 API 키/암호입니다. 오류가 발생했기 때문일 수 있습니다. –

API 키/비밀은 Postman을 사용하여 올바르게 작동합니다. 나는 주소 표시 줄을 통해 API에 액세스하기 위해 API 키/암호를 사용하기까지했으며 여전히 작동했습니다. –

그래, 왜 axios 인증 호출이 작동하지 않았는지 알 수 없었지만 통과 할 수있는 방법을 찾았습니다. 내가 한 일은 React 대신 express 내부에서 인증 API 호출을 작성한 것입니다.

그렇다면 React이 내 서버 localhost를 호출합니다.

axios.get("/secret") 
    .then(
     function(response) 
     { 
      console.log(response) 
     } 
    )

그런 다음 노드/특급 서버를 붙잡고 내가 원하는 API 호출을 실행합니다. 나는 request 및

app.use(cors()); 

... 

app.get('/secret', function(req, res){ 

    var queryUrl = "https://api.stormpath.com/v1/tenant/current; 
    request({url:queryUrl, auth: { 
    user: ID, 
    pass: SECRET 
    }}, function(err, response, body){ 

     if(!err && response.statusCode == 200){ 
      info = JSON.parse(body); 
      res.send(info); 
     } 
     else{ 
      res.send(err) 
     } 
    }) 
})

cors을 사용하고 내가 필요한 모든 stormpath의 API의 URL을했다.

출처

2017-01-10 21:38:30

몇 달 전에이 같은 문제가 발생하여 같은 해결책이되었습니다. 나는 프런트 엔드의 cors와 관련이 있다고 생각합니다. 왜냐하면 api를 위해 다른 도메인을 시도하기 때문입니다.

그리고 사용자 정의 인증 데이터를 헤더에 추가하므로 전화를 걸 때 'withCredentials : true'를 사용해야 할 수도 있습니다. 그런 다음 프리 플라이트 옵션 호출 문제가 발생합니다. 그리고 프론트 엔드에서 처리해야한다고 생각하지 않습니다. 희망이 도움이됩니다.

출처

2017-01-11 15:49:36 Vincent

withCredentials : true를 추가하려고 시도했지만 여전히 작동하지 않았습니다. –

Axios 기본 승인이 Reactjs를 통과하지 못함

답변

관련 문제