{"id":1501,"date":"2017-04-27T00:22:47","date_gmt":"2017-04-26T18:22:47","guid":{"rendered":"http:\/\/promincproductions.com\/blog\/?p=1501"},"modified":"2023-03-24T21:04:23","modified_gmt":"2023-03-25T02:04:23","slug":"cross-domain-ajax-request-cookies-cors","status":"publish","type":"post","link":"https:\/\/promincproductions.com\/blog\/cross-domain-ajax-request-cookies-cors\/","title":{"rendered":"Cross Domain Ajax Request With Cookies (CORS)"},"content":{"rendered":"

Passing cookies in Cross Origin AJAX requests across domains can be accomplished as long as the proper configuration is made on the browser and server side. This tutorial outlies the correct settings to ensure the request doesn’t violate the CORS policy and the request succeeds.<\/p>\n\n\n\n

The Problem<\/h2>\n\n\n\n

Your code makes an AJAX request (with jQuery, though this issue isn’t specific to jQuery) cross-domain and the server expects the cookies from the browser to be passed.  However they are not sent in the request from the browser.<\/p>\n\n\n

\n
\"\"<\/a>
How to correctly make a cross-origin (domain) request (CORS) and pass cookies.<\/figcaption><\/figure>\n<\/div>\n\n\n

CORS vs JSONP<\/h2>\n\n\n\n

I’m not going to go into full details here – just hit on the tip top level.  A plethora of information is available on the internet for these topics.<\/p>\n\n\n\n

CORS<\/a> (Cross-origin resource sharing) is a mechanism implemented by browsers to ensure that malicious requests to a server can’t be made – it’s a restriction method.  It respects the Same-origin<\/a> policy for security reasons.<\/p>\n\n\n\n

First off, JSONP<\/a> technically is a way to solve this problem, however I don’t advise it as the correct solution. \u00a0It is an old and outdated technology and has security flaws. \u00a0The basics of it is that a request to the server (with cookies) is made by the browser for a Javascript function. \u00a0A function is returned and the browser can then use it to process the response as needed.<\/p>\n\n\n\n

How to Pass Cookies on a Cross-Domain AJAX Request from Browser to Server<\/h2>\n\n\n\n

There are two things that need to be done here:<\/p>\n\n\n\n

    \n
  1. Configure your AJAX request<\/strong> to pass cookies<\/li>\n\n\n\n
  2. Set the response<\/strong> headers to conform with CORS<\/li>\n<\/ol>\n\n\n\n

    Configuring the AJAX Request<\/h3>\n\n\n\n

    You need to tell your AJAX request to pass credentials with this bit of code:<\/p>\n\n\n\n

    xhrFields: { withCredentials: true },<\/code><\/pre>\n\n\n\n
    AJAX Parameter: <\/strong>withCredentials<\/h4>\n\n\n\n
    Reference: MDN XMLHttpRequest.withCredentials<\/a><\/p>\n\n\n\n
    \n
    This parameter indicates if a cross-domain request should send credentials (which include cookies, TLS certificates, authorization headers, etc.).<\/p>\n<\/blockquote>\n\n\n\n
    AJAX Request<\/h4>\n\n\n\n
    Here is a full example of what the basic AJAX request should look like.<\/p>\n\n\n\n
    jQuery.ajax({\n\turl: \"http:\/\/subdomain.yourserver.com\/getinformation\/\",\n\tdataType: 'json',\n\txhrFields: { withCredentials: true },\n\tsuccess: function(data) {\n\t\tconsole.log(data);\n\t}\n});<\/code><\/pre>\n\n\n\n
    The browser is now passing cookies (credentials) to the server.  <\/p>\n\n\n\n
    Server Headers<\/h3>\n\n\n\n
    The server now needs to respect the CORS request and respond with the correct headers.  There are two headers that need to be set for this to work roundtrip.<\/p>\n\n\n\n
    Header: Access-Control-Allow-Origin<\/h4>\n\n\n\n
    This needs to be set to the domain from which the browser made the request. \u00a0So if the URL in the browser is:<\/p>\n\n\n\n
    http://www.yourserver.com<\/code><\/pre>\n\n\n\n
    and makes the AJAX request to:<\/p>\n\n\n\n
    http://subdomain.yourserver.com\/getinformation\/<\/code><\/pre>\n\n\n\n
    then this header needs to be set as so:<\/p>\n\n\n\n
    Access-Control-Allow-Origin:http:\/\/www.yourserver.com<\/code><\/pre>\n\n\n\n
    What this header says is that this is the only domain that is allowed to make this cross-origin request – essentially the two domains are the same domain.  A request from any other domain will fail the Same-origin policy of CORS and the request will fail.<\/p>\n\n\n\n
    Reference: MDN Access-Control-Allow-Origin<\/a><\/p>\n\n\n\n
    Header: Access-Control-Allow-Credentials<\/h4>\n\n\n\n
    This header needs to be set to true in this scenario.<\/p>\n\n\n\n
    Access-Control-Allow-Credentials:true<\/code><\/pre>\n\n\n\n
    This is simply a partner header<\/em> to the withCredentials<\/strong> parameter passed in the AJAX request.  It’s saying that credentials are allowed to be passed through this request and response.<\/p>\n\n\n\n
    Reference: MDN Access-Control-Allow-Credentials<\/a><\/p>","protected":false},"excerpt":{"rendered":"
    Passing cookies in Cross Origin AJAX requests across domains can be accomplished as long as the proper configuration […]<\/p>\n","protected":false},"author":1,"featured_media":1505,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wprm-recipe-roundup-name":"","wprm-recipe-roundup-description":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[12,5],"tags":[],"class_list":["post-1501","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-jquery","category-website-development"],"jetpack_featured_media_url":"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2017\/04\/AJAX-CORS-with-Cookies.jpg","jetpack_shortlink":"https:\/\/wp.me\/p4BbcR-od","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/1501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/comments?post=1501"}],"version-history":[{"count":6,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/1501\/revisions"}],"predecessor-version":[{"id":3484,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/1501\/revisions\/3484"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media\/1505"}],"wp:attachment":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media?parent=1501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/categories?post=1501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/tags?post=1501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}