CORS Барьер от поддоменов - PullRequest
0 голосов
/ 25 июня 2018

Я также использую свое веб-приложение в поддомене, я использую другой поддомен для объектов интерфейса.

Вот в чем проблема: CORS

Шрифты не установлены из-за барьера cors.

Запрос на перекрестное происхождение заблокирован: одна и та же политика происхождения запрещает чтение удаленный ресурс на https://assets.example.com/fonts/simple-line-iconsc05f.ttf?thkwh4. (Причина: отсутствует заголовок CORS ‘Access-Control-Allow-Origin’).

Применение:

https://ap.example.com

Активы:

https://assets.example.com

Я добавил корень веб-приложения, .htaccess файл:

<FilesMatch "\.(ttf|otf|eot|woff|svg|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Также nginx.conf file:

server { 
...
location ~* \.(eot|ttf|woff|woff2)$ {
        add_header 'Access-Control-Allow-Origin' '*';
    }
    ...
}

Тем не менее, я все еще застрял в барьере cors.

Это было много раз перепробовано с кешем и разными браузерами. Результат не изменился.

Ответы [ 2 ]

0 голосов
/ 27 июня 2018

@ Редактор, хотя решение от @Sahipsiz может работать, CORS - сложная тема, и, согласно моему предыдущему комментарию, это решение технически неверно (даже если оно могло решить ваш симптом, основная проблема все еще существует)...

Прежде всего, если ваш браузер решит, что CORS находится в режиме воспроизведения, он отправит заголовок запроса Origin, содержащий полный домен запрашивающей страницы, например:

Origin: https://ap.example.com

Если запрос не содержит заголовок запроса Origin, то это не запрос CORS, и вам не нужно ничего делать с CORS.

Если вы уверены, , что вам не нужна поддержка файлов cookie для передачи в / из домена assets, вы можете просто ответить на запрос CORS, включив этот заголовок ответа:

Access-Control-Allow-Origin: *

Однако, если вам действительно нужна поддержка cookie, вам нужно будет включить эти два заголовка ответа:

Access-Control-Allow-Origin: <value of Origin request header>
Access-Control-Allow-Credentials: true

Такв вашем случае вы бы ответили так:

Access-Control-Allow-Origin: https://ap.example.com
Access-Control-Allow-Credentials: true

В некоторых случаях (которые могут к вам не относиться, поскольку вы просто извлекаете шрифты), перед тем как выполнить основной запрос GET / POST / PUT / DELETE, ваш браузер сначала сделает дополнительный запрос «preflight» OPTIONS -это в основном браузер , запрашивающий разрешение на выполнение основного запроса.Запрос OPTIONS включает в себя несколько специфичных для CORS заголовков запроса, и вам необходимо вернуть некоторые «совпадающие» заголовки ответа CORS для этого запроса OPTIONS (но без тела ответа).Если вы сделаете это правильно, браузер выполнит основной запрос.

Для запроса , что OPTIONS, вы должны вернуть следующие заголовки ответа CORS:

Access-Control-Allow-Origin: <value of Origin request header>
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: <value of Access-Control-Request-Method request header>
Access-Control-Allow-Headers: <value of Access-Control-Request-Headers request header>

Эти заголовки ответа сообщают браузеру, что вы в порядке с запросом GET / POST / DELETE / PUT, который он собирается сделать.

Вы также можете дополнительно передать следующий заголовок ответа на запрос OPTIONS (в дополнение к четыремопределено выше):

Access-Control-Max-Age: 86400

, который говорит браузеру кэшировать заголовки ответа OPTIONS - это не позволяет ему делать предварительный запрос каждый раз.

CORS ain 'Легко.

0 голосов
/ 26 июня 2018

Вы можете попробовать это:

location / {   

        if ($request_filename ~* ^.*?/([^/]*?)$) {
            set $filename $1; 
        }

        if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)|(jpg)|(png)|(css)|(js)$){
            add_header 'Access-Control-Allow-Origin' "*";
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type,X-Api-Token';
        }

    } 
...