{"id":3908,"date":"2016-11-07T00:33:54","date_gmt":"2016-11-07T06:33:54","guid":{"rendered":"https:\/\/weblizar.com\/?p=3908"},"modified":"2025-08-07T15:41:06","modified_gmt":"2025-08-07T10:11:06","slug":"enable-cross-origin-resource-sharing","status":"publish","type":"post","link":"https:\/\/weblizar.com\/blog\/enable-cross-origin-resource-sharing\/","title":{"rendered":"Enable Cross-Origin Resource Sharing"},"content":{"rendered":"

What is Cross-Origin Resource Sharing (CORS) –<\/strong><\/h3>\n

Cross-origin resource sharing is fundamental that can make visible the resources\u00a0which are hidden. Cross-Origin Resource Sharing (CORS) is a specification that enables truly open access across domain boundaries. <\/span>CORS allows web scripts to interact more openly with content outside of the original domain, leading to better integration between web services.\u00a0Cross-origin resource sharing allows blocked resources just like – fonts, on a web page to be requested from another domain outside the domain from which the resource originated.<\/p>\n

CORS defines a way in which a browser and server can interact to determine whether or not it is safe to allow the cross-origin request. It allows for more freedom and functionality than purely same-origin requests but is more secure than simply allowing all cross-origin requests.<\/p>\n

 <\/p>\n

Why is CORS important?<\/h2>\n

JavaScript and the web programming has grown by leaps and bounds over the years, but the same-origin policy still remains. This prevents JavaScript from making requests across domain boundaries and has spawned various hacks for making cross-domain requests.<\/p>\n

CORS introduces a standard mechanism that can be used by all browsers for implementing cross-domain requests. The spec defines a set of headers that allow the browser and server to communicate about which requests are (and are not) allowed. CORS continues the spirit of the open web by bringing API access to all.<\/p>\n

Enable Cross-Origin Resource Sharing – <\/strong><\/h3>\n

1. CORS on Apache<\/span><\/h3>\n

To add the CORS authorization to the header using Apache, simply add the following line inside either the <Directory><\/code><\/strong>,<Location><\/code><\/strong> <Files><\/code> or <VirtualHost><\/code><\/strong> sections of your server config (usually located in a *.conf files, such as httpd.conf or apache.conf), or within a .htaccess<\/code> file:<\/p>\n

\n
 Header set Access-Control-Allow-Origin \"*\"<\/pre>\n<\/blockquote>\n
To ensure that your changes are correct, it is strongly recommended that you use<\/p>\n
\n
apachectl -t<\/pre>\n<\/blockquote>\n
to check your configuration changes for errors. After this passes, you may need to reload Apache to make sure your changes are applied by running the command<\/p>\n
\n
sudo service apache2 reload<\/pre>\n<\/blockquote>\n
or<\/p>\n
\n
apachectl -k graceful<\/pre>\n<\/blockquote>\n
Altering headers requires the use of mod_headers<\/a>. Mod_headers is enabled by default in Apache, however, you may want to ensure it’s enabled by run<\/p>\n
\n
a2enmod headers<\/pre>\n<\/blockquote>\n
Note<\/span>: you can also use add<\/code> <\/span>rather than set<\/code><\/span>, but be aware that add<\/code> <\/span>can add the header multiple times, so it’s likely safer to use set.<\/p>\n
 <\/p>\n
2. CORS on App Engine<\/span><\/h3>\n
For Python-based applications in Google App Engine, the self.response.headers.add_header()<\/code> method can be used, such as:<\/p>\n
\n
class CORSEnabledHandler(webapp.RequestHandler):\r\n  def get(self):\r\n    self.response.headers.add_header(\"Access-Control-Allow-Origin\", \"*\")\r\n    self.response.headers['Content-Type'] = 'text\/csv'\r\n    self.response.out.write(self.dump_csv())<\/pre>\n<\/blockquote>\n
For Java-based applications, use resp.addHeader()<\/code>:<\/p>\n
\n
public void doGet(HttpServletRequest req, HttpServletResponse resp) {\r\n  resp.addHeader(\"Access-Control-Allow-Origin\", \"*\");\r\n  resp.addHeader(\"Content-Type\", \"text\/csv\");\r\n  resp.getWriter().append(csvString);\r\n}<\/pre>\n<\/blockquote>\n
And for Go-based applications, use w.Header().Add()<\/code>:<\/p>\n
\n
func doGet(w http.ResponseWriter, r *http.Request) {\r\n  w.Header().Add(\"Access-Control-Allow-Origin\", \"*\")\r\n  w.Header().Add(\"Content-Type\", \"text\/csv\")\r\n  fmt.Fprintf(w, csvData)\r\n}\r\n\r\n<\/pre>\n<\/blockquote>\n
3. CORS on ASP.NET<\/span><\/h3>\n
If you don’t have access to configure IIS, you can still add the header through ASP.NET by adding the following line to your source pages:<\/p>\n
\n
Response.AppendHeader(\"Access-Control-Allow-Origin\", \"*\");\r\n\r\n<\/pre>\n<\/blockquote>\n
ASP.NET Web API<\/h4>\n
ASP.NET Web API 2 supports CORS.<\/p>\n
To enable CORS support, add the Microsoft.AspNet.WebApi.Cors<\/a> NuGet packages to your project.<\/p>\n
Add this code to your configuration:<\/p>\n
\n
public static void Register(HttpConfiguration config)\r\n{\r\n    \/\/ New code\r\n    config.EnableCors();\r\n}<\/pre>\n<\/blockquote>\n
To enable cross-origin requests, add the [EnableCors] attribute to your Web API controller or controller method:<\/p>\n
\n
[EnableCors(origins: \"http:\/\/example.com\", headers: \"*\", methods: \"*\")]\r\npublic class TestController : ApiController\r\n{\r\n    \/\/ Controller methods not shown...\r\n}\r\n\r\n<\/pre>\n<\/blockquote>\n
Enabling Globally<\/h3>\n
The method described above can also be used to enable CORS across the API without annotating each controller:<\/p>\n
\n
public static void Register(HttpConfiguration config)\r\n{\r\n    var corsAttr = new EnableCorsAttribute(\"http:\/\/example.com\", \"*\", \"*\");\r\n    config.EnableCors(corsAttr);\r\n}\r\n\r\n<\/pre>\n<\/blockquote>\n
4. CORS on AWS API Gateway<\/span><\/h3>\n
Amazon API Gateway adds support for CORS enabling through a simple button in the API Gateway console. Unfortunately, that button has a partial behavior, thus setting CORS correctly only for 200 answers (so not other HTTP status codes) and ignoring Jquery header support. The best solution considered so far is about avoiding to use the CORS button and set configurations manually.<\/p>\n
This can be achieved in a couple of steps:<\/strong><\/h4>\n
1. Log into API Gateway console<\/p>\n
2. Create all the REST resources that need to be exposed with their methods before setting up CORS (if new resources\/methods are created after enabling CORS, these steps must be repeated)<\/p>\n
3. Select a resource<\/p>\n
4. Add OPTIONS method, choose as integration type “mock”<\/p>\n
5. For each Method of a resource<\/p>\n
6. Go to Response Method<\/p>\n
7. Add all the response method that should be supported (i.e. 200, 500, etc.)<\/p>\n
8. For each response code set Response Headers to
\nX-Requested-With
\nAccess-Control-Allow-Headers
\nAccess-Control-Allow-Origin
\nAccess-Control-Allow-Methods<\/p>\n
9. Go to Integration Response, select one of the created response codes, then Header Mappings<\/p>\n
10. Insert default values for headers
\nexample:
\nX-Requested-With: ‘*’
\nAccess-Control-Allow-Headers: ‘Content-Type,X-Amz-Date,Authorization,X-API-Key,x-requested-with’
\nAccess-Control-Allow-Origin: ‘*’
\nAccess-Control-Allow-Methods: ‘POST,GET,OPTIONS’
\nThis operation has to be repeated for each method, including the newly created OPTIONS<\/p>\n
11. Deploy the API to a stage<\/p>\n
12. Check using http:\/\/client.cors-api.appspot.com\/client that CORS requests have been successfully enabled<\/p>\n
 <\/p>\n
5. CORS on Caddyserver<\/span><\/h3>\n
To add the CORS authorization to the header using Caddy, simply add the following line inside your caddyfile:<\/p>\n
\n
cors\r\n\r\n<\/pre>\n<\/blockquote>\n
This will allow all<\/b><\/span> resources to be accessed from every<\/b><\/span> domain.<\/p>\n
You can also be more specific, i.e. allow specific resources to specific domains:<\/p>\n
\n
cors \/foo http:\/\/mysite.com http:\/\/anothertrustedsite.com<\/pre>\n<\/blockquote>\n
There are many more options you can use, here is a full example, as shown in the caddyserver docs<\/a>:<\/p>\n
\n
cors \/ {\r\n  origin            http:\/\/allowedSite.com\r\n  origin            http:\/\/anotherSite.org https:\/\/anotherSite.org\r\n  methods           POST,PUT\r\n  allow_credentials false\r\n  max_age           3600\r\n  allowed_headers   X-Custom-Header,X-Foobar\r\n  exposed_headers   X-Something-Special,SomethingElse\r\n}\r\n\r\n<\/pre>\n<\/blockquote>\n
6. CORS in CGI Scripts<\/span><\/h3>\n
Just output the line:<\/p>\n
\n
Access-Control-Allow-Origin: *<\/pre>\n<\/blockquote>\n
.. as part of your CGI script’s headers, for example, in Perl (using CGI.pm):<\/p>\n
\n
print header(\r\n  -type => 'text\/turtle',\r\n  -content_location => 'mydata.ttl',\r\n  -access_control_allow_origin => '*',\r\n);\r\n\r\n<\/pre>\n<\/blockquote>\n
7. CORS in Perl PSGI scripts<\/span><\/h3>\n
The module Plack::Middleware::CrossOrigin provides a complete CORS server side implementation. To allow any request from any location, just add this to your builder:<\/p>\n
\n
enable 'CrossOrigin', origins => '*';\r\n\r\n<\/pre>\n<\/blockquote>\n
8. CORS in Python<\/span><\/h3>\n
\n
print \"Content-Type: text\/turtle\"\r\nprint \"Content-Location: mydata.ttl\"\r\nprint \"Access-Control-Allow-Origin: *\"\r\n\r\n<\/pre>\n<\/blockquote>\n
9. CORS on ExpressJS<\/span><\/h3>\n
In your ExpressJS<\/a> app on node.js<\/a>, do the following with your routes:<\/p>\n
\n
app.use(function(req, res, next) {\r\n  res.header(\"Access-Control-Allow-Origin\", \"*\");\r\n  res.header(\"Access-Control-Allow-Headers\", \"Origin, X-Requested-With, Content-Type, Accept\");\r\n  next();\r\n});\r\n\r\napp.get('\/', function(req, res, next) {\r\n  \/\/ Handle the get for this route\r\n});\r\n\r\napp.post('\/', function(req, res, next) {\r\n \/\/ Handle the post for this route\r\n});\r\n\r\n<\/pre>\n<\/blockquote>\n
10. CORS on IIS6<\/span><\/h3>\n
To CORS-enable Microsoft IIS6, perform the following steps:<\/p>\n
    \n
  1. Open Internet Information Service (IIS)<\/em> Manager<\/li>\n
  2. Right-click the site you want to enable CORS for and go to Properties<\/em><\/li>\n
  3. Change to the HTTP Headers<\/em> tab<\/li>\n
  4. In the Custom HTTP headers<\/em> section, click Add<\/em><\/li>\n
  5. Enter Access-Control-Allow-Origin<\/code> as the header name<\/li>\n
  6. Enter *<\/code> as the header value<\/li>\n
  7. Click Ok<\/em> twice<\/li>\n<\/ol>\n
    11. CORS on IIS7<\/span><\/h3>\n
    For Microsoft IIS7, merge this into the web.config<\/code> file at the root of your application or site:<\/p>\n
    \n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<configuration>\r\n <system.webServer>\r\n   <httpProtocol>\r\n     <customHeaders>\r\n       <add name=\"Access-Control-Allow-Origin\" value=\"*\" \/>\r\n     <\/customHeaders>\r\n   <\/httpProtocol>\r\n <\/system.webServer>\r\n<\/configuration><\/pre>\n<\/blockquote>\n
    If you don’t have a web.config<\/code> file already, or don’t know what one is, just create a new file called web.config<\/code> containing the snippet above.<\/p>\n
    12. CORS on Meteor<\/span><\/h3>\n
    To add CORS authorization to a Meteor<\/a> application, use the webapp<\/a> package’s WebApp.connectHandlers<\/code> to customize HTTP headers.<\/p>\n
    \n
    \/\/ Listen to incoming HTTP requests, can only be used on the server\r\nWebApp.rawConnectHandlers.use(function(req, res, next) {\r\n  res.setHeader(\"Access-Control-Allow-Origin\", \"*\");\r\n  return next();\r\n});<\/pre>\n<\/blockquote>\n
    Use the optional path<\/code> argument to only call the handler for paths that match a specified string.<\/p>\n
    \n
    \/\/ Listen to incoming HTTP requests, can only be used on the server\r\nWebApp.rawConnectHandlers.use(\"\/public\", function(req, res, next) {\r\n  res.setHeader(\"Access-Control-Allow-Origin\", \"*\");\r\n  return next();\r\n});\r\n\r\n<\/pre>\n<\/blockquote>\n
    13. CORS on Nginx<\/span><\/h3>\n
    The following Nginx configuration enables CORS, with support for preflight requests.<\/p>\n
    \n
    #\r\n# Wide-open CORS config for nginx\r\n#\r\nlocation \/ {\r\n     if ($request_method = 'OPTIONS') {\r\n        add_header 'Access-Control-Allow-Origin' '*';\r\n        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';\r\n        #\r\n        # Custom headers and headers various browsers *should* be OK with but aren't\r\n        #\r\n        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';\r\n        #\r\n        # Tell client that this pre-flight info is valid for 20 days\r\n        #\r\n        add_header 'Access-Control-Max-Age' 1728000;\r\n        add_header 'Content-Type' 'text\/plain charset=UTF-8';\r\n        add_header 'Content-Length' 0;\r\n        return 204;\r\n     }\r\n     if ($request_method = 'POST') {\r\n        add_header 'Access-Control-Allow-Origin' '*';\r\n        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';\r\n        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';\r\n     }\r\n     if ($request_method = 'GET') {\r\n        add_header 'Access-Control-Allow-Origin' '*';\r\n        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';\r\n        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';\r\n     }\r\n}\r\n\r\n<\/pre>\n<\/blockquote>\n
    14. CORS in Perl PSGI scripts<\/span><\/h3>\n
    The module Plack::Middleware::CrossOrigin<\/a> provides a complete CORS server side implementation. To allow any request from any location, just add this to your builder:<\/p>\n
    \n
    enable 'CrossOrigin', origins => '*';<\/pre>\n<\/blockquote>\n
    This module is also available in Debian and Ubuntu as libplack-middleware-crossorigin-perl.<\/p>\n
    15. CORS on PHP<\/span><\/h3>\n
    If you don’t have access to configure Apache, you can still send the header from a PHP script. It’s a case of adding the following to your PHP scripts:<\/p>\n
    \n
    <?php\r\n header(\"Access-Control-Allow-Origin: *\");<\/pre>\n<\/blockquote>\n
    Note:<\/span> as with all uses of the PHP header function<\/a>, this must be before any output has been sent from the server.<\/p>\n
     <\/p>\n
    16. CORS on ColdFusion<\/span><\/h3>\n
    If you don’t have access to configure you web server, you can still send the header from a Coldfusion script. It’s a case of adding the following to your Coldfusion scripts:<\/p>\n
    Tag Based File<\/h4>\n
    \n
    <cfheader name=\"Access-Control-Allow-Origin\" value=\"*\">\r\n\r\n<\/pre>\n<\/blockquote>\n
    Script Based File<\/h4>\n
    \n
    var response = getPageContext().getResponse();\r\nresponse.setHeader(\"Access-Control-Allow-Origin\",\"*\");<\/pre>\n<\/blockquote>\n
    Note:<\/span> This needs to be set before any output has been sent from the server.<\/p>\n
    17. CORS on Tomcat<\/span><\/h3>\n
    Apache Tomcat includes support for CORS (Starting from Tomcat version 7.0.41).<\/p>\n
    Here is an example from those docs that demonstrates a minimal CORS configuration:<\/p>\n
    \n
    <filter>\r\n  <filter-name>CorsFilter<\/filter-name>\r\n  <filter-class>org.apache.catalina.filters.CorsFilter<\/filter-class>\r\n<\/filter>\r\n<filter-mapping>\r\n  <filter-name>CorsFilter<\/filter-name>\r\n  <url-pattern>\/*<\/url-pattern>\r\n<\/filter-mapping>\r\n\r\n<\/pre>\n<\/blockquote>\n
    18. CORS on Virtuoso<\/span><\/h3>\n
    These instance\/server-level settings require OpenLink Virtuoso Open Source (VOS) 6.1.3<\/a> or later.<\/p>\n
      \n
    1. In the Virtuoso Conductor<\/em>, go to Web Application Server<\/em> \u2192 Virtual Domains & Directories<\/em>.<\/li>\n
    2. Expand the default Interface<\/em> store.<\/li>\n
    3. Click New Directory<\/em>.<\/li>\n
    4. Specify the desired Virtual Directory Type<\/em>, or choose an existing virtual directory to use as a template.<\/li>\n
    5. Click Next<\/em>.<\/li>\n
    6. Specify the Directory Path<\/em> value.<\/li>\n
    7. Set the CORS options<\/em>.\n