1

I've looked at so many StackOverflow questions about the 'Access-Control-Allow-Origin' problem that occurs when requesting 'GET' in AJAX.

I'm deployed a simple static application to Heroku by creating a simple PHP script to serve up the HTML file (<?php include_once("home.html"); ?>).

Index.php

<?php header("Access-Control-Allow-Origin: *"); 
      header("Access-Control-Allow-Credentials: true "); 
      header("Access-Control-Allow-Methods: OPTIONS, GET, POST"); 
      header("Access-Control-Allow-Headers: Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control"); 
      include_once("home.html"); ?>

home.html

is just a static html file. js file: 

$.ajax({ url: 'http://example.com', 
         type: 'GET', 
         crossDomain: true, 
         success: function(res) { 
                   console.log("hello"); 
                  } 
         })

My site pulls images using AJAX. I've tried everything I can to make my site allow CORS but nothing will work. I have tried changing my headers like so header("Access-Control-Allow-Origin: *"); and even tried editing my .htaccess file.

I'm stuck. I would appreciate some help.

rene
  • 41,474
  • 78
  • 114
  • 152
Henry McDouglas
  • 11
  • 2
  • Why are you using ajax to fetch images? – deefour Aug 25 '15 at 18:20
  • @deefour -- it's more than that, sort of like a webscraper. – Henry McDouglas Aug 25 '15 at 18:24
  • There are so many relevant details you're not providing. Help us help you. Describe your setup in detail. Show code. Show exactly what you've done. Show exactly the error you're having. – deefour Aug 25 '15 at 18:27
  • index.php: `` home.html is just a static html file. js file: `$.ajax({ url: 'http://example.com', type: 'GET', crossDomain: true, success: function(res) { console.log("hello"); } })` – Henry McDouglas Aug 25 '15 at 18:30
  • @deefour anything else you'd like? error: "XMLHttpRequest cannot load http://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access." – Henry McDouglas Aug 25 '15 at 18:31
  • If you are webscraping other people's websites then I recommend giving those websites a call and requesting that they turn on CORS. – MonkeyZeus Aug 25 '15 at 19:17
  • @MonkeyZeus it's ESPN. How can I turn on CORS? – Henry McDouglas Aug 25 '15 at 19:18
  • @HenryMcDouglas give them a call and ask politely. – MonkeyZeus Aug 25 '15 at 19:19
  • @HenryMcDouglas yeah, you have a fundamental misunderstanding of CORS. You would need ESPN to whitelist your server's hostname in their CORS configuration in order for your requests to their server to not throw security exceptions in your browser. Ajax is the wrong tool for this job. – deefour Aug 25 '15 at 19:24
  • @deefour Then how come it works when I test with the CORS Google Chrome Extension? – Henry McDouglas Aug 25 '15 at 19:38
  • @HenryMcDouglas Assuming you are using [ForceCORS](https://chrome.google.com/webstore/detail/forcecors/oajaiobpeddomajelicdlnkeegnepbin?hl=en) then `ForceCORS is a Google Chrome extension which allows you to selectively apply CORS Headers to any web server responses you choose. This is extremely helpful when developing a web application that makes Ajax/XHR requests.` – MonkeyZeus Aug 25 '15 at 19:44
  • @MonkeyZeus Actually [this one here](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en). But either way, they aren't asking for ESPN's help...correct? So how do I do what they are doing? – Henry McDouglas Aug 25 '15 at 19:46
  • @HenryMcDouglas Both extensions do the exact same thing. They are tricking your web browser into thinking that websites are sending the "CORS" header. The CORS security is implemented on the browser side of things. Basically your website is example.com and your browser is aware of this when you make an AJAX request to espn.com. The web browser will first get in touch with espn.com to see if this is OK. espn.com is basically saying "no, this is not OK" so your web browser won't scrape the site. Those extensions merely modify, "hack", the response to say "yes, this is OK" – MonkeyZeus Aug 25 '15 at 19:51
  • @MonkeyZeus so there's no way to just scrape ESPN without ESPN agreeing? – Henry McDouglas Aug 25 '15 at 19:54
  • Not with AJAX and certainly not with the popular web browsers which conform to CORS rules. Maybe there is some sort of web browser out there specifically built without CORS restrictions but I doubt your visitors are using it. [You can do it with PHP though.](http://stackoverflow.com/a/594380/2191572) – MonkeyZeus Aug 25 '15 at 19:56

1 Answers1

1

You cannot use credentials and * at the same time. If you want to use credentials in the request, you will need to explicitly list the requesting origin on the server. E.g., Access-Control-Allow-Origin: example.com.

Anne
  • 7,070
  • 1
  • 26
  • 27