向restful api发送ajax POST请求

Question

我通过教程创建了一个基于 php slim 框架的 API，现在我可以注册，使用身份验证登录用户：

URL     /register
Method  POST
Params  name, email, password

/register 调用不需要认证，所以我写了 ajax 来测试 API：

<button id="createPin"></button>
<script>
$(function() { 
    $('#createPin').click(function(e) { 
        e.preventDefault();


        var dataTest = { "name": "test", "email": "pepe@peperoni.com", "password": "sarasa" }
var urlAjax = "http://www.agroagro.com/test/v1/register";

$.ajax({
type: "POST",
url: urlAjax,
contentType: "application/json",
data: dataTest ,
success: function(data) { alert("ajax worked"); },
error: function(data) {console.log(data); },
dataType: 'json',
beforeSend: function (xhr) {
            xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
        },
        headers: {
            'Access-Control-Allow-Origin': '*'
        }
});


}); 
});
</script>

我尝试从 localhost 向 agroagro.com/test/v1/register 运行这个 ajax 调用，但我得到：

XMLHttpRequest cannot load http://www.agroagro.com/test/v1/register. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404.

是否有任何解决方案可以发出跨域 ajax 请求，因为我计划将此代码用作移动应用程序的前端，所以我需要通过 ajax 跨域发出请求...

（restApi 是按照本教程创建的：http://www.androidhive.info/2014/01/how-to-create-rest-api-for-android-app-using-php-slim-and-mysql-day-23/）

Answer 1

您需要设置正确的标头响应。

就我而言，我有一组默认标头，当我收到对我的 api 控制器的调用时，我总是设置这些标头。这是在我的 _construct 中设置的

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization");

有一些非常有用的指南可以帮助您了解 CORS 的工作原理以及您需要它的原因。

Cross-origin resource sharing

Cross-domain Ajax with Cross-Origin Resource Sharing

编辑：

首先，您需要使用 Access-Control-Allow-Origin 来允许访问所有来源：*，您现在正在执行此操作，因此您将看到与发布的原始错误不同的错误。我在使用 phoneGap 和 Ionic 时遇到了类似的问题，通过在我的 ajax 调用中添加内容类型标头来解决这个问题。这篇文章帮助了我XMLHttpRequest cannot load。

我正在为我的 API 使用 Codeigniter，所以我不知道这会有多大帮助，但它非常通用，所以应该为您指明正确的方向。

我有一个名为 API 的控制器，用于从数据库中获取数据并返回 JSON。

class Api extends CI_Controller {
    ....
    ....
}

在这个类中，我有一个 __construct 函数。 __construct 总是在调用类时运行，因此您不需要自己调用它。在 __construct 中设置标头 CORS 标头。

public function __construct()
{
    parent::__construct();

    // Set access header
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
    header("Access-Control-Allow-Headers: Origin, HTTP_X_REQUESTED_WITH, Content-Type, Accept, Authorization");

    ....
    ....
}

希望对你有帮助