0

I have a CSS file that I am loading via AJAX from my dreamhost account. I get the error No 'Access-Control-Allow-Origin' header is present on the requested resource. I googled and found there is something called an .htaccess file (I have no idea what this is and couldn't understand anything that tried to explain it). Anyway I made one of these files and put in it:

Access-Control-Allow-Origin "*"
Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

This is something I found that said to do this but I don't know why. Anyway, it doesn't work and I'm still getting the same error. How can I get this to work?

Nick Manning
  • 2,828
  • 1
  • 29
  • 50
  • Can you not just use a `` tag? – thatidiotguy Nov 25 '14 at 17:57
  • I'm doing some javascript with it and appending it to the dom. For example I have some variables in my CSS that I'm replacing with values using str_replace. If I load it with a link tag I'm afraid the browsers will get rid of the CSS it doesn't understand. – Nick Manning Nov 25 '14 at 17:59
  • This issue is that Ajax cannot pull information from a different host. Ajax only works when pulling information from the same server the ajax call is on. – CaldwellYSR Nov 25 '14 at 18:01
  • @CaldwellYSR I don't think that's correct because I think you can adjust the settings to allow AJAX requests...I just can't get it working properly. Am I wrong about that? – Nick Manning Nov 25 '14 at 18:45
  • @NickManning I'm not an Ajax expert by any means but from what I've read and from a treehouse tutorial I remember watching a while back it was said that the limitation of Ajax is that it can only request information from files on the same server. – CaldwellYSR Nov 25 '14 at 18:48
  • @CaldwellYSR okay...perhaps youre right – Nick Manning Nov 25 '14 at 18:50
  • @NickManning http://stackoverflow.com/questions/3897641/can-ajax-request-data-from-a-remote-server – CaldwellYSR Nov 25 '14 at 18:53

1 Answers1

0

Chances are, you just need to edit the url of your file-path to your css. If you're using a full absolute path, (ex. 'http://www.asdf.com/css/css.style') try using a relative path instead. ('/css/css.style').

Also, keep in mind that http://asdf.com and http://www.asdf.com is different. Try one or the other.

chdltest
  • 853
  • 2
  • 6
  • 18
  • I can't use a relative path because it is on a different origin. It doesn't work with or without the www... – Nick Manning Nov 25 '14 at 18:44
  • Although, why are you trying to grab a file from a different server via AJAX? Couldn't you just download that file, upload it on the same server, and place the css file where the page needs it? – chdltest Nov 25 '14 at 20:05
  • I can't upload it to the server because I don't have permission to do that. – Nick Manning Nov 25 '14 at 20:06
  • and this doesn't work in your header: ? (I added spaces on purpose, remove them when you try it and of course target it properly... also trying to see if you really need to actually use AJAX or not) – chdltest Nov 25 '14 at 20:07
  • As I said in another comment somewhere, the problem with using a link tag is that I need to manipulate the contents with Javascript. I also suspect that browsers will automatically strip out parts of the file. Is there any way to do this with AJAX? – Nick Manning Nov 25 '14 at 20:14
  • So you don't have permission to upload your own css file? Do you have access to the css file on the server you're working on? Could you not copy and paste the styles from the css file you wanted on to the css file you have access to? I don't see why those styles would be stripped or ignored by the contents that are retrieved through javascript. We're not dealing with iframes, right? I mean, I'm sure if you get desperate you'd resort to inline styling. I'm also assuming @import is out of the question. – chdltest Nov 25 '14 at 20:22