CORS Request with jQuery Ajax & PHP

Question

I have tried so many times to get this working but just cannot seem to make ends meet.

When I first implemented this, it worked perfectly for a few requests and then out of nowhere. It stops working.

Here's my code run from a grease/tamper monkey script:

$.ajax({
    url: 'ServerLinkHere',
    crossDomain: true,
    data: {
        artist: artist,
        track: title,
        link: data.url
    },
    type: 'POST',
    success: function (resp) {
        console.log(resp.responseText);
    }
});

Here's my server side script (Taken from the user Ganesh in a different thread thanks):

// Allow from any origin
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);
}

After the code, I do my computations: Downloading a file and then returning a link to the file download as the body text.

Currently, it seems like the computations are being ran because the file does appear on the filesystem.

However, when it returns a link, the chrome browser still throws the access-control error. Here's a debug picture (couldnt directly attach, no rep):

However, I also hooked up the proxy to CharlesProxy Debugger and the debugger shows that everything is a-okay. Here's a picture of the response:

Could this be a preflight issue? No OPTIONS was sent on my part.

Your answer is here: http://stackoverflow.com/questions/20442628/cors-jquery-ajax-request — pid, Jul 22 '14 at 21:16
I have already set the header properly. It still doesn't work. To give you benefit of the doubt, I recreated the same request/response solution did and it still returned the same error. — Kevin Pei, Jul 22 '14 at 21:20
XMLHttpRequest cannot load xxxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://hypem.com' is therefore not allowed access. I'm using a greasemonkey script so the origin is from hypem — Kevin Pei, Jul 22 '14 at 21:30
This new info is interesting. It looks like the problem is entirely server-side. Somehow headers are not set as you want. You should find a tab in your inspection tool (firebug) where the response headers are shown. Are they as you expected? — pid, Jul 22 '14 at 21:35
That could perhaps be the issue. I just tried this on firefox, chrome and the proxy debugger and all the times, the server never returned the header despite me setting it in the php file. Is it possible that web hosts disable them? — Kevin Pei, Jul 22 '14 at 21:42
Well, I put this on my server-side `header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN'] . "");`. These two lines `Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"` `Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"` in my .htaccess and everything works fine. And yes, this shouldn't be used in .htaccess `Header add Access-Control-Allow-Origin "*"`. — hex494D49, Jul 22 '14 at 21:42
Thanks for your help. However, still nothing. I replicated your code by setting server to `` and created an .htaccess in that folder with the code `Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type" Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"` it seems like right now the headers are showing up — Kevin Pei, Jul 22 '14 at 21:56
Take off that `if` condition, use just this `header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN'] . "");` — hex494D49, Jul 22 '14 at 21:57
Also, avoid anything to be put into the output buffer. Even an empty space will hinder you from setting headers. A classic PHP error is to have a white space somewhere unnoticed before headers are set. — pid, Jul 22 '14 at 22:31

silkfire · Answer 1 · 2014-07-22T22:23:49.133

2

Try commenting out your server side script (just echo some dummy string for purpose of debugging), and then add this to your htaccess:

SetEnvIf Origin ^(.*)$ ORIGIN_DOMAIN=$0
<Files "*">
  Header add Access-Control-Allow-Origin %{ORIGIN_DOMAIN}e
  Header add Access-Control-Allow-Methods "GET, POST, OPTIONS"
  Header add Access-Control-Allow-Headers "Authorization, X-Requested-With, Content-Type, Origin, Accept"
  Header add Access-Control-Allow-Credentials "true"
</Files>

edited Jul 22 '14 at 22:23

answered Jul 22 '14 at 22:15

silkfire

24,585
15
82
105

I edited the file to just output an html hi and commented out the rest of the code. My .htaccess file was edited so it reflected yours. Still doesnt work when requesting from jsfiddle – Kevin Pei Jul 23 '14 at 14:09
No errors other than the usual xmlhttprequest cannot load ... no access-control bla bla bla from the chrome console. one weird thing i noticed is that a person debugging my issue recreated his request and it worked for him yet when i visited the page. it didn't work. Could this be a client-side issue? – Kevin Pei Jul 23 '14 at 15:16
2

In case anyone was wondering, I put this in my server-side .htaccess where I was getting CORS Request denied error and this fixed it. – Aaron Belchamber Oct 30 '14 at 13:16

CORS Request with jQuery Ajax & PHP

1 Answers1