Request-Header-Feld Access-Control-Allow-Origin ist nicht erlaubt

Question

Ich entwickle RESTFul API mit PHP. Zum Beispiel ist der folgende Code für einen, wenn diese APIs:

<?php 

    require('includes/config.php'); 

     $data = array(); 

     try { 
       $stmt = $db->query('SELECT postID, postTitle, postDesc, postDate,tags FROM blog_posts where inMain=inMain ORDER BY postID DESC LIMIT 5'); 
       $error = false; 
       $message = "ok"; 
       $i=0; 
       while($row = $stmt->fetch()){ 

        $tags = explode(",",$row['tags']); 
        $finalTags = array();   
        foreach($tags as $item) { 
         if($item != '' && $item != ' '){ 
          array_push($finalTags,strtolower(trim($item))); 
         } 
        } 

        array_push($data, [ 
         'id' => $row['postID'], 
         'title' => $row['postTitle'], 
         'desc' => $row['postDesc'], 
         'date' => $row['postDate'], 
         'tags' => $finalTags 
        ]); 

       } 
      } catch(PDOException $e) { 
       $message = $e->getMessage(); 
       $error = true; 
      } 
    $response = array(); 
    $response["data"] = $data; 
    $response["error"] = $error; 
    $response["message"] = $message; 

header('Access-Control-Allow-Origin: *'); 
header('Access-Control-Allow-Credentials: true'); 
header('Access-Control-Allow-Methods: GET,HEAD,OPTIONS,POST,PUT'); 
header('Access-Control-Allow-Headers: Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers'); 
header('Content-Type: application/json'); 

echo json_encode($response); 
?> 

Aufruf von dieser API aus dem Browser funktioniert es gut. Aber wenn ich es aus der JavaScript-Aufruf erhalte ich folgende Fehlermeldung:

XMLHttpRequest cannot load http://www.example.com/api/v1/getPostsInMain.php. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response. 

Ich versuche, diese API von AngularJS zu nennen, wie folgend:

app.factory("Data", ['$http', 'toaster', 
    function ($http, toaster) { // This service connects to our REST API 

     var serviceBase = 'http://www.example/v1/'; 
     var conf= { headers: { 
      'Access-Control-Allow-Origin':'*', 
      'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS', 
      'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token', 
      'Content-Type': 'application/json' 
     } 
     }; 

     var obj = {}; 
     obj.toast = function (data) { 

      toaster.pop(data.status, "", data.message, 10000, 'trustedHtml'); 
     } 
     obj.get = function (q) { 
      return $http.get(serviceBase + q,conf).then(function (results) { 
       return results.data; 
      }); 
     }; 
     obj.post = function (q, object) { 
       return $http.post(serviceBase + q, object, conf).then(function (results) { 
       return results.data; 
      }); 
     }; 
     return obj; 
}]); 

Was ist das Problem hier? Wie können Sie die erforderlichen Header in der Anfrage und in der Antwort setzen? ist es mit hosting verwandt?

Answer 1

Der Server (PHP) muss auch CORS erlauben. Fügen Sie am Anfang Ihres PHP-Skripts die folgende Kopfzeile hinzu:

header("Access-Control-Allow-Origin: *");