StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You may well want to use JSON-P instead (see below). First a quick explanation.</p> <p>The header you've mentioned is from the <a href="http://www.w3.org/TR/access-control/" rel="noreferrer">Cross Origin Resource Sharing</a> standard. Beware that it is <a href="http://caniuse.com/#search=cors" rel="noreferrer">not supported</a> by some browsers people actually use, and on other browsers (Microsoft's, <em>sigh</em>) it requires using a special object (<code>XDomainRequest</code>) rather than the standard <code>XMLHttpRequest</code> that jQuery uses. It also requires that you change server-side resources to explicitly allow the other origin (<code>www.xxxx.com</code>).</p> <p>To get the JSON data you're requesting, you basically have three options:</p> <ol> <li><p>If possible, you can be maximally-compatible by correcting the location of the files you're loading so they have the same origin as the document you're loading them into. (I assume you must be loading them via Ajax, hence the <a href="http://en.wikipedia.org/wiki/Same_origin_policy" rel="noreferrer">Same Origin Policy</a> issue showing up.)</p></li> <li><p>Use <a href="http://en.wikipedia.org/wiki/JSONP#JSONP" rel="noreferrer">JSON-P</a>, which isn't subject to the SOP. jQuery has built-in support for it in its <code>ajax</code> call (just set <code>dataType</code> to "jsonp" and jQuery will do all the client-side work). This requires server side changes, but not very big ones; basically whatever you have that's generating the JSON response just looks for a query string parameter called "callback" and wraps the JSON in JavaScript code that would call that function. E.g., if your current JSON response is:</p> <pre><code>{"weather": "Dreary start but soon brightening into a fine summer day."} </code></pre> <p>Your script would look for the "callback" query string parameter (let's say that the parameter's value is "jsop123") and wraps that JSON in the syntax for a JavaScript function call:</p> <pre><code>jsonp123({"weather": "Dreary start but soon brightening into a fine summer day."}); </code></pre> <p>That's it. JSON-P is <em>very</em> broadly compatible (because it works via JavaScript <code>script</code> tags). JSON-P is only for <code>GET</code>, though, not <code>POST</code> (again because it works via <code>script</code> tags).</p></li> <li><p>Use CORS (the mechanism related to the header you quoted). Details in <a href="http://www.w3.org/TR/access-control/" rel="noreferrer">the specification linked above</a>, but basically:</p> <p>A. The browser will send your server a "preflight" message using the <code>OPTIONS</code> HTTP verb (method). It will contain the various headers it would send with the <code>GET</code> or <code>POST</code> as well as the headers "Origin", "Access-Control-Request-Method" (e.g., <code>GET</code> or <code>POST</code>), and "Access-Control-Request-Headers" (the headers it wants to send).</p> <p>B. Your PHP decides, based on that information, whether the request is okay and if so responds with the "Access-Control-Allow-Origin", "Access-Control-Allow-Methods", and "Access-Control-Allow-Headers" headers with the values it will allow. You don't send any body (page) with that response.</p> <p>C. The browser will look at your response and see whether it's allowed to send you the actual <code>GET</code> or <code>POST</code>. If so, it will send that request, again with the "Origin" and various "Access-Control-Request-xyz" headers.</p> <p>D. Your PHP examines those headers <em>again</em> to make sure they're still okay, and if so responds to the request.</p> <p>In <strong>pseudo</strong>-code (I haven't done much PHP, so I'm not trying to do PHP syntax here):</p> <pre><code>// Find out what the request is asking for corsOrigin = get_request_header("Origin") corsMethod = get_request_header("Access-Control-Request-Method") corsHeaders = get_request_header("Access-Control-Request-Headers") if corsOrigin is null or "null" { // Requests from a `file://` path seem to come through without an // origin or with "null" (literally) as the origin. // In my case, for testing, I wanted to allow those and so I output // "*", but you may want to go another way. corsOrigin = "*" } // Decide whether to accept that request with those headers // If so: // Respond with headers saying what's allowed (here we're just echoing what they // asked for, except we may be using "*" [all] instead of the actual origin for // the "Access-Control-Allow-Origin" one) set_response_header("Access-Control-Allow-Origin", corsOrigin) set_response_header("Access-Control-Allow-Methods", corsMethod) set_response_header("Access-Control-Allow-Headers", corsHeaders) if the HTTP request method is "OPTIONS" { // Done, no body in response to OPTIONS stop } // Process the GET or POST here; output the body of the response </code></pre> <p>Again stressing that this is pseudo-code.</p></li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload