37

I've been reading about Access-Control-Allow-Origin because it seems effective at allowing cross domain requests since I have access to the external site. My question ism how do I use Access-Control-Allow-Origin to allow cross domain requests. I tried this (don't laugh) (by the way all I want is for a single number, 1 or 0 to be returned)

<html>
<head>
Access-Control-Allow-Origin: *
</head>
<body>
1
</body>
</html>

Am I close? Thanks for your help. If there is an easier way to do a simple cross-domain request let me know.

Shashank Agrawal
  • 25,161
  • 11
  • 89
  • 121
davis
  • 1,911
  • 6
  • 26
  • 50
  • The first everyone has to tell is that is server-scripting. Do you have a server? –  Aug 05 '19 at 20:31

6 Answers6

20

There are 3 ways to allow cross domain origin (excluding jsonp):

  1. Set the header in the page directly using a templating language like PHP. Keep in mind there can be no HTML before your header or it will fail.

  2. Modify the server configuration file (apache.conf) and add this line. Note that "*" represents allow all. Some systems might also need the credential set. In general allow all access is a security risk and should be avoided:

    Header set Access-Control-Allow-Origin "*" Header set Access-Control-Allow-Credentials true

  3. To allow multiple domains on Apache web servers add the following to your config file

    SetEnvIf Origin "http(s)?://(www\.)?(example.org|example.com)$" AccessControlAllowOrigin=$0$1 Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin Header set Access-Control-Allow-Credentials true

  4. For development use only hack your browser and allow unlimited CORS using the Chrome Allow-Control-Allow-Origin extension

  5. Disable CORS in Chrome: Quit Chrome completely. Open a terminal and execute the following. Just be cautious you are disabling web security:

    open -a Google\ Chrome --args --disable-web-security --user-data-dir

prashant thakre
  • 5,061
  • 3
  • 26
  • 39
mbokil
  • 3,202
  • 30
  • 22
  • The easiest way for local development is to just add the cors extension – kelevra88 Sep 04 '15 at 14:10
  • 31
    The easiest way to inadvertently create code that works in test but mysteriously fails in production is to add the extension. ;) – dannysauer Oct 13 '15 at 21:18
  • Could you provide please an example on how to use this extension? I don't get it to work and there doesn't seem to be any docs. Although I've set up the remote address in the "Intercepted URLs or URL patterns" setting, I'm still seeing messages through Dev Tools explaining that access has been blocked due to CORS. And there is an "Access-Control-Expose-Headers" setting I don't know what is for. I don't know if it's my fault or if the extensions is not working anymore. – Pere May 19 '17 at 15:43
  • `Access-Control-Allow-Credentials true` does not work with wildcards on `Access-Control-Allow-Origin`. – autra Feb 21 '18 at 17:00
13

That is an HTTP header. You would configure your webserver or webapp to send this header ideally. Perhaps in htaccess or PHP.

Alternatively you might be able to use

<head>...<meta http-equiv="Access-Control-Allow-Origin" content="*">...</head>

I do not know if that would work. Not all HTTP headers can be configured directly in the HTML.

This works as an alternative to many HTTP headers, but see @EricLaw's comment below. This particular header is different.

Caveat

This answer is strictly about how to set headers. I do not know anything about allowing cross domain requests.

About HTTP Headers

Every request and response has headers. The browser sends this to the webserver

GET /index.htm HTTP/1.1

Then the headers

Host: www.example.com
User-Agent: (Browser/OS name and version information)
.. Additional headers indicating supported compression types and content types and other info

Then the server sends a response

Content-type: text/html
Content-length: (number of bytes in file (optional))
Date: (server clock)
Server: (Webserver name and version information)

Additional headers can be configured for example Cache-Control, it all depends on your language (PHP, CGI, Java, htaccess) and webserver (Apache, etc).

Community
  • 1
  • 1
700 Software
  • 85,281
  • 83
  • 234
  • 341
  • 8
    It *must* be in the HTTP header. Supporting it in the body would be a security bug. – EricLaw Aug 10 '11 at 21:01
  • Glad you mentioned it. I don't really know how this cross-domain stuff works. I will edit my answer. – 700 Software Aug 10 '11 at 22:54
  • 1
    Thanks for the answer. Now I'm just trying to find a web host that let's me change the http headers. – davis Aug 11 '11 at 14:35
  • 17
    How can this be occomplished with html and javascript. I have an html page calling another html page via javaascript. I am not using any server side scripts which can modify the headers. – Talon Jan 14 '14 at 12:27
  • Trying to retrofit http to be secure always seemed counterproductive and mostly futile. – Ted Shaneyfelt May 12 '21 at 23:24
2
<?php header("Access-Control-Allow-Origin: http://example.com"); ?>

This command disables only first console warning info

console

Result: console result

Jakub Ujvvary
  • 421
  • 4
  • 13
2

If you are using npm and want to load some files/folders allowing cross origin resource sharing(CORS) try the following, install the http-server:

npm install http-server -g

Go to your files/folders folder and run the command below to make your files/folders available at http://127.0.0.1:8080 . This a good choice when you want to keep the files in a safe place and control who can request inferences to it. The -c1 parameter is added to disable caching, and the --cors flag enables cross origin resource sharing(CORS) allowing the hosted files to be used by the client side JavaScript for a given domain.

http-server -c1 --cors .

It worked for me in WSL-ubuntu terminal on windows 10. It should work with npm CLI on any OS.

Thank you.

Waqar Dongre
  • 57
  • 1
  • 6
  • This worked perfectly for me. One point, which might be obvious to some, but this still will not allow cors for files that are not local. In my example I have some fetch references to my local files which worked perfectly. (I call a menu.html file on every page at the top). I access another webpage from one of my html files too, this still fails CORS. – Craig Sep 19 '22 at 10:55
1

If you use Java and spring MVC you just need to add the following annotation to your method returning your page :

@CrossOrigin(origins = "*")

"*" is to allow your page to be accessible from anywhere. See https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin for more details about that.

Laurent
  • 469
  • 3
  • 7
0

These headers on PHP worked for me:

<?php 
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Allow: GET, POST, OPTIONS, PUT, DELETE");
?>
Rodrick
  • 595
  • 10
  • 27