{"id":6301,"date":"2010-05-03T12:34:18","date_gmt":"2010-05-03T19:34:18","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=6301"},"modified":"2010-05-04T08:15:41","modified_gmt":"2010-05-04T15:15:41","slug":"cross-domain-get-forwarding","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/php\/cross-domain-get-forwarding\/","title":{"rendered":"Cross Domain GET Forwarding"},"content":{"rendered":"<p>When you do an AJAX request on a website, the URL you request from needs to reside on the same domain as where the request was made from. This is a security restriction imposed by the browser. There is a way to sneak around this by using a bit of a &#8220;man in the middle&#8221; approach. <\/p>\n<p>PHP, being a server-side language, has the ability to pull content from any URL. So a PHP file can become the man in the middle. The contents of the PHP file can be set up to accept a URL as a parameter and then return the contents of that URL. <\/p>\n<pre><code class=\"php\">&lt;?php\r\n\r\n    echo file_get_contents($_GET['url']);\r\n    \/\/ WARNING: You REALLY should write something to whitelist or otherwise limit what the function will accept, or it could be a security danger to your server (people could read any file).\r\n\r\n?&gt;<\/code><\/pre>\n<p>With that in place, we can do an AJAX request directly to that URL, passing it the URL we <em>actually<\/em> want the data from as a parameter. See how we are passing &#8220;http:\/\/google.com&#8221; as data below.<\/p>\n<pre><code class=\"javascript\">&lt;script type='text\/javascript' src='http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4\/jquery.min.js?ver=1.3.2'&gt;&lt;\/script&gt;\r\n&lt;script type='text\/javascript'&gt;\r\n    $(function() {\r\n       $.ajax({\r\n            type: \"GET\",\r\n            dataType: 'html',\r\n            data: 'url=http:\/\/google.com',\r\n            url: 'get.php',\r\n            success: function(data){\r\n                \/\/ Yah! Do something cool with data\r\n            },\r\n            error: function(){\r\n                \/\/ Boo! Handle the error.\r\n            }\r\n        }); \r\n    });\r\n&lt;\/script&gt;<\/code><\/pre>\n<p>This is an extremely simple example. If you are interested in a more robust version, check out the <a href=\"http:\/\/benalman.com\/projects\/php-simple-proxy\/\" rel=\"noopener\">Simple PHP Proxy<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you do an AJAX request on a website, the URL you request from needs to reside on the same domain as where the request was made from. This is a security restriction imposed by the browser. There is a way to sneak around this by using a bit of a &#8220;man in the middle&#8221; [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3233,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":152212,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/16-intro-ajax\/","url_meta":{"origin":6301,"position":0},"title":"#16: Intro To Ajax","date":"October 7, 2013","format":false,"excerpt":"Ajax ranks pretty high up there on the biggest reasons to use jQuery. Not only does jQuery fix the cross-browser issues, it makes the syntax very easy to use and understand. In this video we take a stab at explain what Ajax is at all. We look at a form\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":209553,"url":"https:\/\/css-tricks.com\/video-screencasts\/143-using-and-caching-third-party-json-with-wordpress\/","url_meta":{"origin":6301,"position":1},"title":"#143: Using and Caching Third-Party JSON with WordPress","date":"October 23, 2015","format":false,"excerpt":"On the design of CSS-Tricks as I record this, one of the things I wanted to add was a \"Front End Design & Development Jobs\" widget, powered by the CodePen Job Board. Those jobs are available as JSON data. Couldn't we just do an Ajax request for that and use\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3754,"url":"https:\/\/css-tricks.com\/snippets\/php\/detect-ajax-request\/","url_meta":{"origin":6301,"position":2},"title":"Detect AJAX Request","date":"September 4, 2009","format":false,"excerpt":"The HTTP_X_REQUESTED_WITH header is sent by all recent browsers that support AJAX requests. if ( !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' ) { # Ex. check the query and serve requested data }","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":150360,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/12-callback-functions\/","url_meta":{"origin":6301,"position":3},"title":"#12: Callback Functions","date":"September 19, 2013","format":false,"excerpt":"Everybody's favorite: concept video time! Callbacks are an important concept in JavaScript. They are functions that are called when an action has completed running. Then lend structure and timing to our code. Take for example the animation we used in the last video. Animations take time to run. What if\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4142,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/load-only-a-section-of-a-page\/","url_meta":{"origin":6301,"position":4},"title":"Load Only a Section of a Page","date":"September 18, 2009","format":false,"excerpt":"Use Case You want to AJAX load a section of another page on your site onto the current page. Say your eCommerce CMS system creates a dynamic menu of products, but that exists as a subdirectory of your site and you want to use that on the homepage. jQuery $(\"#mainNav\").load(\"\/store\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":152216,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/17-posting-ajax\/","url_meta":{"origin":6301,"position":5},"title":"#17: POSTing with Ajax","date":"October 7, 2013","format":false,"excerpt":"We talked about GET in the last video but didn't give POST enough attention. So I thought we'd do that here. The big difference with POST is that you nearly always need to pass along data with the request. That data can take many forms, but it might just be\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/6301"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=6301"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/6301\/revisions"}],"predecessor-version":[{"id":6316,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/6301\/revisions\/6316"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3233"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=6301"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=6301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}