Axiosの基本的な承認がReactjsを経由しない

Question

初めてここに私は行くと尋ねます。

私はいくつかの承認が必要な私のチームが作った嵐のパスのアプリケーションに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 

を働いていた。しかし、私はReactでAxiosを通じて呼び出しを行うためにしようとしたとき、私は401を得るカールを使用して200

Results of API call in Postman

を出てきましたエラー。

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

私はなぜ知らないが、それは私が得た応答に応じてユーザー名とパスワードを提供していません。

code:401 
developerMessage:"Authentication with a valid API Key is required." 
message:"Authentication required." 
moreInfo:"http://www.stormpath.com/docs/quickstart/connect" 
requestId:"3686f590-d69e-11e6-9b8a-22000a8ce5d1" 
status:401 

これまで同様の質問がされていますが、依然として回答がありません。これを読むために時間を割いて

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

。

Answer 1

私はなぜaxios認証呼び出しが機能していなかったのか分かりませんでしたが、解決する方法が見つかりました。私がしたのは、Reactの代わりにexpressの中で認証API呼び出しを行うことでした。

だから、Reactは私のサーバlocalhostを呼び出しています。

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

ノード/エクスプレスサーバーはそれをキャッチし、私が望むAPI呼び出しを実行します。私はrequestとcors

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

を使用し、それは私が必要とするすべてstormpathのAPIのURLで働いていました。

Answer 2

数ヶ月前にこの同じ問題が発生し、同じ解決策になりました。私はあなたがapiのために他のドメインにヒットしようとしているので、フロントエンドのcorsに関係していると思う。

ヘッダーにカスタム認証データを追加するため、電話をかけるときに 'withCredentials：true'を使用する必要があります。その後、プリフライトオプションの呼び出し問題が発生します。そして、私はそれがフロントエンドで処理すべきだとは思わない。この助けを願っています。