将 ajax POST 请求发送到 restfull api

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": "[e-mail]", "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>

我尝试从本地主机运行这个 ajax 调用 agroagro.com/test/v1/register 但我得到：

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 的工作原理以及为什么需要它。

跨源资源共享

具有跨域资源共享的跨域 Ajax

编辑：

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

我正在为我的 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");
    ....
    ....
}

我希望这有帮助