传递ajax标头信息时出现问题

issue while passing ajax header information

本文关键字:问题 信息 ajax 传递      更新时间:2023-09-26

我在尝试运行客户端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/