Keycloak

Question

我有一个简单的 React.js 应用程序。我想测试它是否可以从我的 API 调用端点。我的 API 和 React.js 应用程序都使用 Keycloak 进行身份验证。

这是我的 API 端点：

[HttpGet]
[Route("authorization")]
[Authorize(Roles = "prototype-user")]
public string TestAuthorization()
{
    return "Authorization is working!";
}

这会在 Postman 中测试时显示 Authorization is working 消息。所有其他端点在邮递员中运行良好。

现在，我尝试在同样使用 Keycloak 的 React.js 应用程序中调用此端点。这是我的代码片段

constructor(props) {
    super(props);
    this.state = {
        result: [],
        token: null
    };

    //this is passed from another component derived from keycloak.idToken
    this.state.token = this.props.token 
}

componentDidMount(){
    var url = this.getBaseUrl() + "/authorization";
    fetch(url, {
        method: "get",
        credentials: "include",
        headers: {
            'Authorization': `token ${this.state.token}`,
        },
    }).then(
        res=>res.json())
    .then(
        result=>{
            this.setState({result:result})
        }
    ).catch(error =>
        alert(error)
    )
}

这 returns 一个错误说 SyntaxError:JSON.parse: unexpected character at line 1 column 1 of JSON data 甚至没有进入我的 API 断点。

谁能告诉我这有什么问题吗？我是 React.js 的新手，所以我不知道如何解决这个问题。我已经在寻找其他参考文献，但找不到。

谢谢！

Answer 1

已经通过在授权 header 中将 token 更改为 bearer 解决了这个答案。

componentDidMount() {
    var url = this.getBaseUrl() + "/authorization";
    fetch(url, {
        method: "get",
        credentials: "include",
        headers: {
            'Authorization': `Bearer ${this.state.token}`,
        },
    }).then((response) => {
        if (response.status == 200) {
            return response.json()
        } else {
            throw new Error(response.status)
        }
    })
        .then(result => {
            this.setState({ result: result })
        }).catch(error =>
            alert(error)
        )
}

Keycloak - React.js 无法调用 API

Keycloak - React.js cannot call API

api

reactjs