Какова правильная конфигурация для включения cors с nginx и aws?

Question

Я переношу свое приложение в экземпляр AWS EC2, раньше оно размещалось в Hostgator и работало нормально, теперь, когда мне удалось его перенести, у меня возникли проблемы с ошибкой CORS.

Мое приложение представляет собой угловое приложение в интерфейсе, я развернул его с помощью nginx. Бэкэнд находится в heroku и представляет собой API NodeJs 8.0 Restful

После многих часов поиска я обнаружил, что мне нужно изменить файл подачи моего приложения.

Сначала это было так, и оно работало хорошо, за исключением ошибки CORS

server {     
 listen 80;      
 listen [::]:80;      
 server_name http://your-site-name.com;      
 root /var/www/app-name;   
 server_tokens off;   
 index index.html index.htm;     

 location / {         
     # First attempt to server request as file, then         
     # as directory, then fall back to displaying a 404.          
     try_files $uri $uri/ /index.html =404;      
 }
}

Тогда я попробовал решение, которое нашел около

location / {
  if ($request_method = 'OPTIONS') {
     add_header 'Access-Control-Allow-Origin' '*';
     add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

     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,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
     add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-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,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
     add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
  }
}

Это не сработало, и после перезагрузки страницы я получил ошибку 404 not found nginx. Следующее решение сделало то же самое:

location / {

 # Simple requests
 if ($request_method ~* "(GET|POST)") {
   add_header "Access-Control-Allow-Origin"  *;
 }

 # Preflighted requests
 if ($request_method = OPTIONS ) {
   add_header "Access-Control-Allow-Origin"  *;
   add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
   add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
   return 200;
 }

....
# Handle request
....

}

Наконец я попробовал это:

 location / {
     dav_methods PUT DELETE MKCOL COPY MOVE;

   # Preflighted requestis
   if ($request_method = OPTIONS) {
     add_header "Access-Control-Allow-Origin" *;
     add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD, DELETE";
     add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
    return 200;
  }

  # CORS WHITELIST EVERYTHING
  # This is allowing everything because I am running
  # locally so there should be no security issues.
  if ($request_method = (GET|POST|OPTIONS|HEAD|DELETE)) {
    add_header "Access-Control-Allow-Origin" *;
    add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
  }

   try_files $uri $uri/ /index.html$is_args$args;
}

Это последнее решение работало нормально (то есть, мое приложение загружалось, и ошибка 404 не обнаруживалась), НО все же оно дало мне ошибку CORS

И да, я включил CORS в моем бэкэнде, это мой файл server.js:

require('./config/config.js');

//Requires
const express = require('express')
const colors = require('colors')

const bodyParser = require('body-parser')


const app = express();

//Enable cors
app.use(function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, 
Content-Type, Accept, token");
   res.header("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE, OPTIONS");
 next();
});

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());


app.use(require("./routes/index"));


//serve
app.listen(process.env.PORT, () => {
    console.log(`Listening ${process.env.PORT}. Status:`, 'online'.green)
});

Это ошибка, которую я получаю в консоли браузера

Access to XMLHttpRequest at 
'https://backend.herokuapp.com/inventory/most_sold' from origin 
'http://front-end-ip' has been blocked by CORS policy: No 'Access-Control- 
Allow-Origin' header is present on the requested resource.

Я надеюсь, что некоторые из вас могут немного помочь мне

Заранее спасибо

Answer 1

Я добился большего успеха, используя more_set_headers в nginx.conf вместо add_header:

    more_set_headers 'Access-Control-Allow-Origin:http://www.mydomain.test';
    more_set_headers 'Access-Control-Allow-Methods: POST';

Это работает даже без заголовка Access-Control-Allow-Methods, как для FF, так и для Chromium.

Директива more_set_headers является частью модуля HttpHeadersMore , который входит в состав nginx-extras nginx, вы можете установить его в Ubuntu 16, используя : * * 1014

sudo apt-get install nginx-extras

Answer 2

Вы можете использовать CORS (пакет node.js для предоставления промежуточного программного обеспечения Connect / Express, которое можно использовать для включения CORS с различными параметрами), т.е.

• Установить CORS в node.js npm i cors

В файле server.js: -

• const cors = require("cors");

• Затем установите параметры CORS,

  const corsoption = { origin: true, methods: "GET,HEAD,PUT,PATCH,POST,DELETE", credentials: true, exposedHeaders: ["x-auth-token"] };

• app.use(cors(corsoption));

Тогда вы не будете заблокированы политикой CORS .

Документация: - пакет Cors