传递ajax标头信息时出现问题
issue while passing ajax header information
我在尝试运行客户端javascript时遇到了一些问题,因为我需要通过ajax传递头。虽然php/curl中也有同样的功能,但我不明白为什么它不能通过ajax工作。经过一点搜索,我发现了如何在ajax中传递头。但我还是有以下问题。
阻止跨来源请求:同源策略禁止读取位于的远程资源https://cej3j6och1.execute-api.us-east-1.amazonaws.com/staging/accounts/login.(原因:CORS标头中缺少令牌"访问控制允许标头"CORS飞行前通道的"Access Control Allow Headers")。
我已经在这里看到了一些关于这个问题的帖子,但我认为如果我的php/ccurl代码可以工作,那么js/ajax也应该可以工作。下面是包含一个按钮的html单个文件,单击该按钮后,ajax调用将发布信息并获得响应。我确信在ajax中传递头信息的方式存在一些问题。
这是aws_login.html
<button onclick="login()">Login</button>
<div id="respData"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
function login()
{
var postData = {"email": "mgftest1507_p3@gmail.com",
"password":"TVRJeg",
"social_login":"no",
"provider":"",
"provider_id":""
};
var strData = JSON.stringify(postData);
//alert(postData);
alert(strData);
$.ajax({
type: "POST",
dataType: "text",
beforeSend: function (request)
{
request.setRequestHeader("Access-Control-Allow-Origin", '*');
request.setRequestHeader("Access-Control-Allow-Methods", 'OPTIONS');
request.setRequestHeader("Access-Control-Allow-Headers", 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token');
request.setRequestHeader("Content-Type", 'application/json');
request.setRequestHeader("x-api-key", 'RmnZWntaBy42ZHkL9KoHY90KTIXfQVNY5TJsSAoA');
},
crossOrigin: true,
crossDomain: true,
url: "https://cej3j6och1.execute-api.us-east-1.amazonaws.com/staging/accounts/login",
headers: {
'Access-Control-Allow-Origin':'*',
'Access-Control-Allow-Methods':'OPTIONS',
'Access-Control-Allow-Headers':'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
'Content-Type':'application/jsonp',
'x-api-key':'RmnZWntaBy42ZHkL9KoHY90KTIXfQVNY5TJsSAoA',
},
data: strData,
success: function(response, textStatus, XMLHttpRequest) {
alert(response);
$('#respData').html(response);
}
});
}
</script>
我之前已经尝试过在函数中分别发送和标头。两者都不起作用。下面是php/ccurl代码,它运行得非常好。这是aws_login_p.php
<?php
$url = 'https://cej3j6och1.execute-api.us-east-1.amazonaws.com/staging/accounts/login';
$client = curl_init($url);
curl_setopt($client, CURLOPT_URL, $url);
curl_setopt($client, CURLOPT_RETURNTRANSFER, true);
curl_setopt($client, CURLOPT_HEADER, false);
curl_setopt($client, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($client, CURLOPT_HTTPHEADER,
array('Access-Control-Allow-Origin: *',
'Access-Control-Allow-Methods: OPTIONS',
'Access-Control-Allow-Headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
'Content-Type: application/json',
'x-api-key: RmnZWntaBy42ZHkL9KoHY90KTIXfQVNY5TJsSAoA',
));
$arr = array(
'email' => 'mgftest1507_p3@gmail.com',
'password' => 'TVRJeg',
'social_login' => 'no',
'provider' => '',
'provider_id' => ''
);
$array_val = json_encode($arr);
curl_setopt($client, CURLOPT_POST, true);
curl_setopt($client, CURLOPT_POSTFIELDS, $array_val);
$head = curl_getinfo($client);
$raw = curl_exec($client);
$result = json_decode($raw);
curl_close($client);
echo '<pre/>';
print_r($result);
echo '</pre>';
?>
两者都是单独的独立文件。所以任何人都可以尝试在当地跑步。html文件也可以在没有任何服务器的情况下运行。我想我需要找到一种方法,通过这种方法,我也可以在ajax中发送所有这些curl参数。
删除Access-Control
标头和beforeSend
事件
参见以下内容:
var postData = {
"email": "mgftest1507_p3@gmail.com",
"password": "TVRJeg",
"social_login": "no",
"provider": "",
"provider_id": ""
};
var strData = JSON.stringify(postData);
//alert(postData);
alert(strData);
$.ajax({
type: "POST",
dataType: "text",
crossOrigin: true,
crossDomain: true,
url: "https://cej3j6och1.execute-api.us-east-1.amazonaws.com/staging/accounts/login",
headers: {
'Content-Type': 'application/jsonp',
'x-api-key': 'RmnZWntaBy42ZHkL9KoHY90KTIXfQVNY5TJsSAoA',
},
data: strData,
success: function(response, textStatus, XMLHttpRequest) {
alert(response);
$('#respData').html(response);
}
});
https://jsfiddle.net/tL5rh8ds/
相关文章:
- 在 AngularJS 中显示信息的标记存在问题
- 有关 Javascript IndexedDB 输入信息的问题
- DHTMLX 移动调度程序事件详细信息视图高度问题
- ASP.net VB 详细信息视图插入:取消问题的 javascript 回发
- 无法使用谷歌地图在“文档”上执行“写入”(信息窗口问题)
- Ionic:带有选项卡和侧菜单导航问题的主详细信息
- 数据表 - o语言信息问题
- ACF谷歌地图 - 信息窗口问题
- 谷歌api:信息窗口内容问题
- text信息框内的区域焦点/事件传播问题
- 使用ajax通过邮件发送信息时出现问题
- 谷歌地图API 3-信息窗口问题
- JavaScript:在返回自定义对象信息时遇到问题
- 警报信息的问题
- 显示变更事件信息的问题
- 使用窗口的问题.Navigator对象来获取访问者浏览器的信息
- 获取外部文件's信息(状态和大小)时出现问题
- 问题试图设置谷歌地图信息窗口的内容与
- 谷歌地图-自定义JS输出信息窗口和标记问题
- 无法从phpmyAdmin数据库表中检索问题/信息