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

Question

我有以下代码：

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

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

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

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

Answer 1

您需要Authorization在HTTP请求标头中发送参数，该参数由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
            }});