nginx – конфигурация CORS, которая позволяет обслуживать файлы на localhost?

Вопрос или проблема

server {
listen 80 default_server;
listen [::]:80 default_server;

root /var/www/html;

# Добавьте index.php в список, если вы используете PHP
index index.html index.htm index.nginx-debian.html;

server_name _;

location / {
    # Сначала попытка обслужить запрос как файл, затем
    # как каталог, затем возврат к отображению 404.
    try_files $uri $uri/ /index.html;
}

location /home {

    if ($request_method = 'OPTIONS') {
        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';

        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';
    }
    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';
    }

}}

Доступ к импортированному ресурсу по адресу 'http://sub.domain.io//public/bower_components/polymer/polymer.html' с источника 'http:/sub.domain.io' был заблокирован политикой CORS: заголовок 'Access-Control-Allow-Origin' отсутствует в запрашиваемом ресурсе. Следовательно, источник 'http://localhost:4200' не имеет доступа.

Ответ или решение

Конфигурация CORS в Nginx, позволяющая файловому обслуживанию с localhost, требует корректного указания заголовков и настройки путей к ресурсам. Давайте разберем ваш текущий конфигурационный файл и предложим необходимые изменения, чтобы устранить проблемы с CORS.

Текущая конфигурация

Ваш текущий конфигурационный файл выглядит следующим образом:

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;

    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /home {
        ...
    }
}

Проблема с CORS

Вы получаете ошибку, связанную с CORS, когда пытаетесь получить доступ к следующим ресурсам:

Access to Imported resource at 'http://sub.domain.io//public/bower_components/polymer/polymer.html' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Эта ошибка указывает на то, что Nginx не возвращает заголовок Access-Control-Allow-Origin, необходимый для доступа к ресурсам с другого домена (localhost в данном случае).

Решение

Чтобы решить эту проблему, вам нужно добавить соответствующие заголовки CORS в конфигурацию Nginx. Предлагаю следующие изменения:

1. Добавьте новую секцию location для пути /public, так как ошибка указывает, что проблема возникает именно при попытке доступа к этому ресурсу.

2. Обеспечьте, чтобы заголовок Access-Control-Allow-Origin был установлен для всех необходимых методов HTTP.

Вот как может выглядеть исправленный конфигурационный файл:

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;

    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /public {
        # Добавляем заголовки для CORS
        add_header 'Access-Control-Allow-Origin' 'http://localhost:4200' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
        add_header 'Access-Control-Max-Age' 1728000 always;

        if ($request_method = 'OPTIONS') {
            return 204; # Сразу возвращаем 204 для preflight запросов
        }
    }
}

Почему необходимы эти изменения?

• Широкий контроль доступа: Исправленный заголовок Access-Control-Allow-Origin ограничивает доступ к вашему серверу только с http://localhost:4200. Если вам нужно разрешить доступ с других источников, вы можете использовать wildcard (*), но это менее безопасно.

• Поддержка других методов: Выявление других методов HTTP (GET, POST, OPTIONS) также обеспечит, что ваш сервер будет готов обрабатывать запросы любого типа, что важно для взаимодействия различных частей вашего приложения.

• Обработка preflight запросов: Предварительный запрос (preflight request) для OPTIONS не возвращает содержимое, а только заголовки, поэтому мы используем return 204; для экономии ресурсов.

Заключение

Теперь, после применения данных изменений, ваша конфигурация Nginx должна корректно обрабатывать запросы к ресурсам с localhost, предотвращая возникновение CORS ошибок. Не забудьте перезагрузить сервер Nginx после изменения конфигурации с помощью команды:

sudo systemctl reload nginx

Постарайтесь следить за возможными другими настройками вашего приложения, которые могут также влиять на CORS, и тестируйте изменения. Если будут другие вопросы, не стесняйтесь задавать!