jQuery PHP problems with cross-domain request

Question

I believe this question has been asked before, but the answer given was not enough direction to see where my code is wrong. I apologize if it's a similar question exists; I've spent a few hours searching and couldn't find a solution.

I built a small RESTful-esque service in PHP to bring over database information into my site. I'm able to make calls from the browser and Fiddler successfully, but when I try to request the data from $.ajax() I bomb out. First thing's first, let me post the PHP code:

I'm calling http://api.horodyski.me

class ApiController
{
    protected $endpoint = '';
    protected $method = '';
    protected $verb = '';
    protected $args = Array();

    public function __construct($request)
    {
        header("Access-Control-Allow-Orgin: *");
        header("Access-Control-Allow-Methods: GET");
        header("Content-Type: application/json");

        $this->args = explode('/', rtrim($request, '/'));
        $this->endpoint = array_shift($this->args);

        if (array_key_exists(0, $this->args) && !is_numeric($this->args[0])) { $this->verb = array_shift($this->args); }

        $this->method = $_SERVER['REQUEST_METHOD'];

        if($this->method != 'GET')
            throw new Exception("Unexpected Header");
        $this->request = $this->_cleanInputs($_GET);               

    }

    public function processAPI()
    {
        $class = $this->endpoint."Controller";
        if(class_exists($class))
        {
            $controller = new $class();
            return $this->_response($controller->getAllItems());
        }
        return $this->_response("No Endpoint: ".$this->endpoint, 404);
    }

    private function _response($data, $status = 200)
    {
        header("HTTP/1.1 ".$status." ".$this->_requestStatus($status));
        // $data comes back from controller in JSON format.
        return json_encode($data);
    }

    private function _cleanInputs($data)
    {
        $cleanInput = Array();
        if(is_array($data))
            foreach($data as $k => $v)
                $cleanInput[$k] = $this->_cleanInputs($v);
        else
            $cleanInput = trim(strip_tags($data));
        return $cleanInput;
    }

    private function _requestStatus($code)
    {
        $status = array(
            200 => 'OK',
            404 => 'Not Found',
            405 => 'Method Not Allowed',
            500 => 'Internal Server Error',
        );
        return ($status[$code]) ? $status[$code] : $status[500]; 
    }
} 

I've tried implementing my jQuery call returning jsonp and this is where I get stuck.

Request is made from http://horodyski.me/v2 . Code below shows normal json return type:

<p class="test"></p>
    <script>
        $(document).ready(function () {
            $.ajax({
                url: "http://api.horodyski.me/skills",
                method: "GET",
                dataType: 'jsonp',
                success: function (data) {
                    $("p.test").text(data);
                },
                error: function (xhr, textStatus, error) {
                    debugger;
                }
            });
        });
    </script>

I get the following in my error callback:

textStatus = "parseerror" error = "jQuery210008879405278902885_1396911952892 was not called"

Again, Fiddler shows no error -- I'm out of ideas. Am I not handling it correctly on the PHP side, or is my jQuery messed up? Maybe I need to edit my .htaccess file to handle the callback parameter sent from jQuery on jsonp calls? I'm way over my head here, any suggestions?

I can call http://horodyski.me/api/skills and it will work with regular json, but I still can't get CORS working.

Answer 1

I would go for a CORS replacement, this normalizes most of the differences between browsers. I made best experiences with xdomain . It is library agnostic on the client side and you can use jQuery XHR or any other library without changing anything.