Question

我在尝试运行客户端javascript时遇到了一些问题，我需要通过ajax传递头文件。虽然同样在php / curl中工作，但我不知道为什么它不能通过ajax工作。经过一段时间或搜索后，我发现了如何在ajax中传递头文件。但我仍然遇到问题。

阻止跨源请求：同源策略禁止读取远程资源在 https://cej3j6och1.execute-api.us-east-1.amazonaws.com/staging/accounts/login。（原因：在CORS标头中缺少令牌'access-control-allow-headers' 来自CORS预检频道的“Access-Control-Allow-Headers”。

我已经看到了这个问题的一些帖子，但我认为如果我的php / curl代码正常工作，那么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>

我已在功能中分别尝试 before 和标题。两者都没有用。下面是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标题和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/

传递ajax头信息时出现问题

1 个答案: