Не разрешен доступ к полю заголовка запроса-Control-Allow-Origin

#php #angularjs #json #api #access-control

#php #angularjs #json #API #контроль доступа

Вопрос:

Я разрабатываю, RESTFul API используя PHP . Например, приведенный ниже код предназначен для одного из этих API:

 <?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 != '' amp;amp; $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);
?>
  

Вызов из этого API из браузера работает нормально. Но когда я вызываю его из JavaScript, я получаю следующую ошибку:

 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.
  

Я пытаюсь вызвать этот API из AngularJS следующим образом:

 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;
}]);
  

В чем здесь проблема? как вы можете задать требуемые заголовки в запросе и в ответе? связано ли это с хостингом, который я использую?

Ответ №1:

Сервер (PHP) также должен разрешить CORS. Добавьте следующий заголовок в начало вашего PHP-скрипта:

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

Комментарии:

1. Заголовки должны быть до того, как какой-либо вывод был отправлен с сервера. Итак, это должно быть перед require(‘includes/config.php ‘).