Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I use Access-Control-Allow-Origin? Does it just go in between the html head tags?

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.

like image 859
davis Avatar asked Aug 10 '11 18:08

davis


People also ask

How does Access-Control allow Origin header work?

Access-Control-Allow-Origin is a CORS (Cross-Origin Resource Sharing) header. When Site A tries to fetch content from Site B, Site B can send an Access-Control-Allow-Origin response header to tell the browser that the content of this page is accessible to certain origins.

Is it safe to use Access-Control allow origin?

Access-Control-Allow-Origin: * is totally safe to add to any resource, unless that resource contains private data protected by something other than standard credentials. Standard credentials are cookies, HTTP basic auth, and TLS client certificates.


2 Answers

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

like image 63
mbokil Avatar answered Sep 28 '22 21:09

mbokil


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).

like image 21
700 Software Avatar answered Sep 28 '22 21:09

700 Software