XMLHttpRequest cannot load ***. Invalid HTTP status code 404

shinix
Javascript

Salut à tous,

Je viens vers vous car je deviens fou ^^

Je suis entrain de developper une api rest pour mon début d'application et après avoir tester mon api avec l'extension "Advenced Rest Client" depuis chrome tout fonctionne.

Maintenant sous AngularJS j'essaie d'aller récupérer mes posts avec un simple :

  $http({
    url: 'http://api.monsite.com/posts',
    method: "GET",
    headers: {'Authorization': 'Bearer jkfjaa9989JHKhkashfjhUHJHJhsjac'}
  }).success(function(data){
    console.log(data);
  });

quand je regarde dans l'outil développeur il me met
monsite.com method OPTIONS

ALors que j'ai bien défini GET... Je ne comprends pas voici d'autre info.

REQUEST HEADERS

OPTIONS /posts HTTP/1.1
Host: api.monsite.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: GET
Origin: http://localhost:8100
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.94 Safari/537.36
Access-Control-Request-Headers: accept, authorization
Accept: /
Referer: http://localhost:8100/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

RESPONSE HEADER

HTTP/1.1 404 Not Found
Date: Thu, 05 Feb 2015 18:39:59 GMT
Server: Apache/2.2.22 (Debian)
X-Powered-By: PHP/5.5.20-1~dotdeb.1
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Cache-Control: no-cache, must-revalidate
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 357
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html

2 réponses

Maenhyr
Réponse acceptée

Bonjour,
après avoir lu les posts similaires sur stackoverflow, j'ai l'impression que le problème vient des headers.

2 solutions :
1) Activer le CORS (Cross Origins Resource Sharing)
2) Faire la requête GET avec jQuery.

shinix
Auteur
Réponse acceptée

Yes j'ai galéré 3 jours dessus que j'en ai oublié mon post.

J'ai réussi à corriger mon problème en passant par HTTPS (avec certificat SSL) + ces quelques lignes de codes :
(en même temps faire un API sans passer par https était déjà un peu bête de ma part^^)

<?php
    if (isset($_SERVER['HTTP_ORIGIN'])) {
        header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Max-Age: 86400'); // cache for 1 day
    }
    // Access-Control headers are received during OPTIONS requests
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {  
        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))header("Access-Control-Allow-Methods: GET, POST, OPTIONS");   
        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
        exit(0);
    }

Résultat ça marche désormais mon app détecte bien POST ou GET à la place du OPTIONS. Si ça peut aider d'autres personnes.

Pour la requète j'avais pas le choix je passe par Angular (via le framework ionic).

Merci de ton aide prbaron