javascript - 传递 ajax header 信息时出现问题

Question

我在尝试运行需要通过 ajax 传递 header 的客户端 javascript 时遇到了一些问题。虽然同样适用于 php/curl ，但我不明白为什么它不能通过 ajax 工作。经过一番搜索后，我发现了如何在 ajax 中传递 header 。但我仍然遇到以下问题。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cej3j6och1.execute-api.us-east-1.amazonaws.com/staging/accounts/login. (Reason: missing token 'access-control-allow-headers' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel).

我已经在这里看到一些关于这个问题的帖子，但我认为如果我的 php/curl 代码有效，那么 js/ajax 也应该有效。 下面是包含一个按钮的 html 单个文件，单击该按钮，ajax 调用将在那里发布信息并获得响应。我确信我在 ajax 中传递 header 信息的方式存在一些问题。

这是 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>

我已经在函数中分别尝试了 beforeSend 和 headers 。两者都没有用。 下面是运行绝对正常的 php/curl 代码。 这是 aws_login_pc.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 参数。

Answer 1

删除 Access-Control header 和 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/