Question

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

URL     /register
Method  POST
Params  name, email, password

/ register call不需要autentification，所以我写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运行此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的工作原理以及您需要它的原因。

Cross-origin resource sharing

Cross-domain Ajax with Cross-Origin Resource Sharing

修改

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

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

我有一个名为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"); .... .... }

我希望这会有所帮助

发送ajax POST请求到restful api

1 个答案: