Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

enabling cors on a nginx server in ElasticBeanstalk?

Im deploying my Nodejs app to AWS Elastic Beanstalk running nginx.

The app is essentially an api, which i can make calls to and retrieve back JSON data i.e. myapi.awselasticbeanstalk.com/api/get_stuff etc.

Im trying to enable CORS so i can access the server from my javascript application (the client).

As per amazon documentation I can edit or extend the nginx configuration adding a config file to the .ebextensions folder.

cors.config

files:
  /etc/nginx/conf.d/cors.conf:
    mode: "000644"
    owner: root
    group: root
    content: |
        location / {
             if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                #
                # Custom headers and headers various browsers *should* be OK with but aren't
                #
                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
                #
                # Tell client that this pre-flight info is valid for 20 days
                #
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                add_header 'Content-Length' 0;
                return 204;
             }
             if ($request_method = 'POST') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
                add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
             }
             if ($request_method = 'GET') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
                add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
             }
        }

but this is still not working for me.

like image 637
React Solo Avatar asked Jan 09 '18 17:01

React Solo


People also ask

How do I enable CORS in nginx?

To enable CORS on NGINX, you need to use the add_header directive and add it to the appropriate NGINX configuration file. to allow access from any domain.

Does Elastic Beanstalk use nginx?

Elastic Beanstalk uses nginx as the reverse proxy to map your application to your Elastic Load Balancing load balancer on port 80. Elastic Beanstalk provides a default nginx configuration that you can either extend or override completely with your own configuration.


1 Answers

If you set CORS headers in the response that goes out of your node/express application, you don't need to add anything to Nginx configuration.

Below is the configuration that worked for me, also running node.js on Beanstalk, and a cloudfront-hosted client application calling the API.

Modify as needed:

server.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Credentials', true)
  res.header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
  next()
})
like image 163
SebaGra Avatar answered Nov 03 '22 13:11

SebaGra