Axios 基本授权未在 Reactjs 中通过

Posted 2023-02-19

【中文标题】Axios 基本授权未在 Reactjs 中通过

【英文标题】：Axios basic authorization not going through in Reactjs

【发布时间】：2017-05-24 04:00:27

【问题描述】：

第一次问，我去。

我正在尝试对我的团队制作的 Stormpath 应用程序进行 GET 调用，该应用程序需要一些授权。使用 Postman 进行测试并经过一些配置后，结果为 200。

Results of API call in Postman

使用 curl 工作

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

但是，当我尝试通过 Axios 在 React 中拨打电话时，我收到 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'

)

我不知道为什么，但根据我得到的响应，它没有提供用户名和密码。

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

以前似乎有人问过类似的问题，但仍然没有任何答复。

Reactjs Axios / Spring boot security

Cannot Basic Auth from React App with Axios or SuperAgent

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

感谢您抽出宝贵时间阅读本文。

【问题讨论】：

可能是一个无效的 API 密钥/秘密，正如错误所说。

API 密钥/秘密使用 Postman 可以正常工作。我什至使用 API 密钥/秘密通过地址栏访问 API，它仍然有效。

【参考方案1】：

几个月前遇到了同样的问题，最终得到了相同的解决方案。我认为它与前端的 cors 有关，因为您尝试为 api 访问其他域。

并且您将一些自定义身份验证数据添加到标题中，因此您在拨打电话时可能需要使用“withCredentials: true”。然后它将导致预检选项调用问题。而且我认为它不应该在前端处理。希望对您有所帮助。

【讨论】：

我尝试添加 withCredentials: true 还是不行

【参考方案2】：

好的，所以我不知道为什么axios auth 调用不起作用，但我找到了一种方法。我所做的是在 express 中而不是在 React 中进行身份验证 API 调用。

所以发生的事情是React 调用我的服务器 localhost。

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

然后 node/express 服务器捕获它并运行我想要的 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。