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

How Set Authorization headers at HTML Form or at A href

我有这个代码:

            $.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 的情况下做类似的事情?怎么样?

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

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

例如

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 使您的调用同步,就像提交一样。如果您需要 post 其他数据到服务器,您可以将 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
            })
});