Отправить запрос Ajax POST для restfull апите

Question

Я создаю API на основе PHP тонкого каркасу учебника теперь я в состоянии зарегистрировать, пользователь входа в системе с аутентификацией:

URL  /register 
Method POST 
Params name, email, password 

/регистрацией вызова не нужна аутентификация, так что я пишу 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> 

Я пытаюсь запустить этот АЯКС вызов от локального хоста к 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 междоменного becouse У меня есть план, чтобы использовать этот код в качестве фронтенда с помощью мобильного приложения, так что мне нужно делать запросы через 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

EDIT:

Прежде всего, необходимо разрешить доступ ко всем происхождения с помощью Access-Control-Allow-Origin: *, вы делаете это сейчас, чтобы вы увидит другую ошибку в оригинале. У меня была аналогичная проблема при использовании phoneGap и Ionic, и она была решена путем добавления заголовка содержимого в мой вызов ajax. Этот пост помог мне 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"); 

    .... 
    .... 
} 

Я надеюсь, что это помогает