Démarrage utilisation AJAX et API

Version imprimable

Bonsoir,

je commence à développer une API -> cela fonctionne en utilisant l'extension Chrome.

Maintenant j'essaye de passer par le biais d'une page HTML avec jquery

Au niveau de mon API lorsque je passe par l'extension

Code:

http://localhost/api/v1/tasks

Method : POST
Headers : Authorization : 440eb3ed294c7f1e3ccbd002a8503e33
Payload : action : mavaleur

j'obtiens bien en retour status 201 created avec en JSON
Code:

1 2 3 4 5 { error: false message: "Task created successfully" task_id: 2 }
Par contre lorsque j'essaye de faire la même chose par une page web, cela ne fonctionne pas
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <html> <head> <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $.ajax({ url: 'http://localhost/api/v1/tasks', type: 'POST', data: {task: valeur1} , success: function() { alert('hello!'); }, error: function() { alert('boo!'); }, beforeSend: setHeader }); }); function setHeader(xhr) { xhr.setRequestHeader('Authorization', '440eb3ed294c7f1e3ccbd002a8503e33'); } </script> </head> <body> <h1>Some Text</h1> </body> </html>
Merci de votre aide

10/05/2014, 11h11
Bovino

Un problème classique de Same Origin Policy...
10/05/2014, 11h41
altair8080

Merci donc si j'ai bien compris en faisant qlq recherches il faut utiliser JSONP.

Reste à voir ce que je dois modifier côté client et/ou serveur.

Je pouvais encore chercher car avec l extension cela fonctionnait.
Entretemps j ai effectué des tests et j ai désactivé l authentification et cela avait l air de fonctionner donc je pensais que cela venait du passage du header

Bovino, je vais avoir besoin de ton aide.

Environnement : Wamp dernière version 64.
J'utilise le framework : slimframework
Je me suis basé sur ce code pour l'API : http://www.androidhive.info/2014/01/...-mysql-day-23/

Avec l'extension RESTclient de chrome cela fonctionne
API/v1/register en post pour créer un user avec les 3 variables (email, password, name)
API/v1/login en post avec les 2 variables (email, password) pour récupérer APIkey
API/v1/tasks avec dans le header Authorization (apikey) et tasks pour le contenu

J'ai créé une seconde version en retirant la partie authentification dans le routage TASKS avec la méthode POST. cela fonctionne toujours

J'ai créé dans un autre répertoire le code suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
 
        $.ajax({
                 url: 'http://localhost/bkpapi/v1/tasks',
        //    url: 'http://localhost/taskmanager/v1/tasks',
            type: 'POST',
            headers: {"Authorization": "4736e3f02a4e2cab381868b79f806436"},
          data: {'email': 'essai1%40gmail.com','password': 'essai1','task': 'bonjour'},
          dataType: 'json',
          success: function(data){ alert('hello!');},
          error: function(data){
              alert("erreur");
             }
        });
      });
 
    </script>
  </head>
  <body>
    <h1>exemple</h1>
  </body>
</html>

Lorsque j'utilise l'api initiale avec authentification cela ne fonctionne pas.
Lorsque j'utilise l'api modifiée sans authentification cela fonctionne .

Tu parles de SOP mais je ne vois pas comment contourner et/ou si c'est bien là le problème.

la fonction d'authentification :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function authenticate(\Slim\Route $route) {
    // Getting request headers
    $headers = apache_request_headers();
    $response = array();
    $app = \Slim\Slim::getInstance();
 
    // Verifying Authorization Header
    if (isset($headers['Authorization'])) {
        $db = new DbHandler();
 
        // get the api key
        $api_key = $headers['Authorization'];
        // validating api key
        if (!$db->isValidApiKey($api_key)) {
            // api key is not present in users table
            $response["error"] = true;
            $response["message"] = "Access Denied. Invalid Api key";
            echoRespnse(401, $response);
            $app->stop();
        } else {
            global $user_id;
            // get user primary key id
            $user_id = $db->getUserId($api_key);
        }
    } else {
        // api key is missing in header
        $response["error"] = true;
        $response["message"] = "Api key is misssing";
        echoRespnse(400, $response);
        $app->stop();
    }
}

Merci

10/05/2014, 14h29
altair8080

Je veux bien appeler une page locale en php mais cette dernière devra toujours appeler et passer des paramètres à ma page distante donc je reporte le problème sur une autre page et je ne trouve pas comment faire.