如何使用 JS/AJAX/JQUERY 为 POST FORM 添加标题授权？答案

【问题标题】：How to add Header Authorization for POST FORM using JS/AJAX/JQUERY?如何使用 JS/AJAX/JQUERY 为 POST FORM 添加标题授权？
【发布时间】：2015-12-30 07:13:04
【问题描述】：

我想在我的页面上使用表单获取输入并将这些值提交到托管在另一个外部站点上的 php。在外部站点上提交数据时，Request maker 扩展会显示与其他输入一起传递的 Header Authorization。

结果可能是一个xml文件（学生记录）。需要拉出来并显示为结果。

使用 $.Ajax 和 jquery 进行了很多尝试，但都是徒劳的。请帮忙。

[1]：http://i.stack.imgur.com/rDO6Z。 jpg [2]：http://i.stack.imgur.com/92uTh。 jpg

function myFunction() {
var name = document.getElementById("name").value;

// AJAX code to submit form.
$.ajax({
type: "POST",
url: "http://externalsite.cpm/results.php.php",
data: dataString,
  beforeSend: function(xhr) {
	
    xhr.setRequestHeader('Authorization', "Basic XXXXXXXXXXXXXXXXXXXXXXXXX" );   or xhr.setRequestHeader('Authorization', "Basic " +btoa(ser_user + ':' + ser_pass));
						},
cache: false,
success: ???


xmlhttp.open("POST","your_url.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=" + name + "&email=" + email);

<body>

<form action="http://externalsite.cpm/results.php" method="post" >
	Enter Your Name<br>
	<input type="text" name="name" >
	<br>
	<input type="submit" onclick="myFunction()" value="Submit">
	
</body>

从我的页面提交值到外部 php 时，如何添加此标头授权？请帮忙！

【问题讨论】：

标签： javascript jquery ajax header authorization

【解决方案1】：

它有点晚了，但仍然为可能面临同样问题的未来读者发布答案。请不要在 ajax 请求中明确提及时，在 html 代码中提供表单提交 url (action) 和方法类型 (POST)。注意给定的代码sn-ps中添加的相应更改。

HTML表单代码：

            <form><!---Removed form submit url-->
            <input type="text" id="keyName" value="testValue">
            <!---Id attribute added to input field to be submitted--->
            <input type="button" onclick="myFunction()" value="Submit">
            <!---Input type is button NOT submit--->
            </form>

Javascript 代码：

function myFunction(){
var dataValue = $("#keyName").val();
$.ajax({
            type : 'POST',
            //remove the .php from results.php.php
            url : "http://externalsite.cpm/results.php",
            //Add the request header
            headers : {
                Authorization : 'Bearer ' + 'XXXXXXXXXXXXXXXXXXXXXXXXX'
            },
            contentType : 'application/x-www-form-urlencoded',
            //Add form data
            data : {keyName : dataValue},
            success : function(response) {
                console.log(response);
            },
            error : function(xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                console.log(err);                   
            }
        }); //End of Ajax
}   // End of myFucntion

更新：

PHP 服务结果.php

<?php 
     print_r($_POST["keyName"]);
?>

【讨论】：

感谢您的回复。我试过这个，但点击提交没有任何反应。如果你能建立一个工作的 jsfiddle，我将不胜感激。提前致谢。
更新了帖子。在这种情况下，您必须托管 php 服务。在您的网页上按 F12，然后打开控制台以查看响应记录器。
快到了。提交时，我在控制台中收到以下响应 XMLHttpRequest cannot load externalsite.com/results.php 。对预检请求的响应未通过访问控制检查：“Access-Control-Allow-Origin”标头的值“subdomain.externalsite.com”不等于提供的来源。因此，Origin 'null' 不允许访问。但是使用名为“Access-Control-Allow-Origin (CORS)”的 chrome 扩展，我能够成功提交并获得所需的结果。
如何在不使用扩展名的情况下成功提交？我对 www.externalsite.com 没有任何控制权。我只需要将页面中的值提交到他们的 php 并获取输出。 P.S：我确实获得了 www.externalsite.com 的许可，但他们不会在他们的网站或 php 上修改任何内容。

【解决方案2】：

我遇到了类似的问题，需要在 HTTP POST 请求标头中添加身份验证标头名称和身份验证令牌值。在构成 Web 应用程序中每个页面的一部分的 HTML 面板的其中一个 JSP 中添加了这个 javascript 拦截器函数。

// this will add employee authentication headers to every ajax call
(function() {
    var site = window.XMLHttpRequest.prototype.send;
    window.XMLHttpRequest.prototype.send = function() {
        this.setRequestHeader("${employee.role.header}", "${employee.auth.secret}")
        return site.apply(this, [].slice.call(arguments));
    };
})();

【讨论】：