如何在 HTML 表单或 A href 中设置授权标头

Question

我有这个代码：

            $.ajax({
                url: "http://localhost:15797/api/values",
                type: 'get',
                contentType: 'application/json',
                headers: {
                    "Authorization": "Bearer " + token
                }
            })

工作正常，但我想在不使用 Ajax 的情况下做到这一点，我想要这样的东西：

        <form action="http://localhost:15797/api/values" method="get">
            <input type="hidden" name="headers[Authorization]" value="Bearer token" />
            <input type="submit" />
        </form>

有可能吗？或者只是在没有 XMLHttpRequest 的情况下做类似的事情？怎么样？

Answer 1

您需要在 HTTP 请求标头中发送 Authorization 参数，它是由 OAuth 流强加的。当然，您可以通过更改 OAuth 服务器的代码来更改它，但如果您无法控制 OAuth 服务器的代码，这是不可能的。

所以回答您的问题，不，您不能将表单的发布数据发送给他们。但是，显然你可以将它们放在隐藏字段中，然后编写一个 JS 代码从该字段中读取并放入请求头中。

例如

HTML：

<input id="tokenField" type="hidden" />
<input id="submitButton" type="button" />

Javascript：

$('#submitButton').on('click',function(){
    $.ajax({
          url: "http://localhost:15797/api/values",
          type: 'GET',
          contentType: 'application/json',
          headers: {
                    "Authorization": "Bearer " + $('#tokenField').val()
                 },
          async: false
            }});

注意async: false 使您的调用同步，就像提交一样。如果您需要将其他数据发布到服务器，您可以将 type: 'GET' 更改为 type: 'POST' 并添加另一个名为 data 的字段并通过其值传递您的表单数据：

<input id="firstName" type="text" />
<input id="lastName" type="text" />
<input id="tokenField" type="hidden" />
<input id="submitButton" type="button" />

$('#submitButton').on('click',function(){
    $.ajax({
          url: "http://localhost:15797/api/values",
          type: 'POST',
          data: { 
                  firstName: $('#firstName').val(),
                  lastName: $('#lastName').val()
                },
          contentType: 'application/json',
          headers: {
                    "Authorization": "Bearer " + $('#tokenField').val()
                 },
          async: false
            })
});