Концепция совместного использования ресурсов (CORS)

Ответ 1

Важное примечание вверх. Если сервер на другом конце не включил его, в вашем клиентском коде ничего не может быть сделано, что позволит использовать запрос ajax с перекрестным происхождением.

Позвольте мне дать вам предысторию, прежде чем ответить на ваш вопрос:

Политика безопасности одного и того же происхождения

Проще говоря, политика безопасности одного и того же происхождения гарантирует, что сценарии из одного источника могут не получать контент из другого источника. Теперь, чтобы объяснить вам концепцию происхождения, позвольте мне процитировать часть статьи Википедии о политике безопасности одного и того же происхождения:

В следующей таблице приведен обзор типичных результатов для проверок по URL-адресу "http://www.example.com/dir/page.html.

Compared URL                                             Outcome  Reason
-------------------------------------------------------  -------  ----------------------
http://www.example.com/dir/page2.html                    Success  Same protocol and host
http://www.example.com/dir2/other.html                   Success  Same protocol and host
http://username:[email protected]/dir2/other.html Success  Same protocol and host
http://www.example.com:81/dir/other.html                 Failure  Same protocol and host but different port
https://www.example.com/dir/other.html                   Failure  Different protocol
http://en.example.com/dir/other.html                     Failure  Different host
http://example.com/dir/other.html                        Failure  Different host (exact match required)
http://v2.www.example.com/dir/other.html                 Failure  Different host (exact match required)
http://www.example.com:80/dir/other.html                 Depends  Port explicit. Depends on implementation in browser.

В отличие от других браузеров, Internet Explorer не включает порт в вычисление источника, используя зону безопасности на своем месте.

Итак, например, ваш JavaScript не может загрузить что-либо (ака, сделать HTTP-запрос) на веб-сервер, отличный от сервера, на котором он был создан. Именно поэтому вы не можете сделать XmlHttpRequests (aka AJAX) для других доменов.

CORS - это один из способов сервер на другом конце (а не код клиента в браузере) отказаться от политики одного и того же происхождения.

Облегченное описание Совместное использование ресурсов (CORS).

Стандарт CORS работает, добавляя новые HTTP-заголовки, которые позволяют серверам обслуживать ресурсы для разрешенных доменов происхождения. Браузеры поддерживают эти заголовки и уважают установленные ограничения.

Пример. Скажите, что ваш сайт http://my-cool-site.com, и у вас есть сторонний API в домене http://third-party-site.com, доступ к которому вы можете получить через AJAX.

И пусть предположим, что страница с вашего сервера my-cool-site.com сделала запрос third-party-site.com. Обычно браузер пользователей отклоняет вызовы AJAX на любой другой сайт, отличный от вашего собственного домена/субдомена, в политике безопасности одинакового происхождения. Но если браузер и сторонний сервер поддерживают CORS, происходит следующее:

• Браузер отправит и Origin HTTP-заголовок на third-party-site.com

  Origin: http://my-cool-site.com
  

• Если сторонний сервер принимает запросы из вашего домена, он ответит заголовком Access-Control-Allow-Origin HTTP:

  Access-Control-Allow-Origin: http://my-cool-site.com
  

• Чтобы разрешить все домены, сторонний сервер может отправить этот заголовок:

  Access-Control-Allow-Origin: *
  

• Если ваш сайт не разрешен, браузер выдает ошибку.

Если у клиента есть довольно современные браузеры, поддерживающие CORS, а ваш сторонний сервер поддерживает CORS, как хорошо, CORS может быть вам полезен.

В некоторых устаревших браузерах (например, IE8) для выполнения вызова, который будет корректно работать с CORS, вы должны использовать объект XDomainRequest для Microsoft вместо XMLHttpRequest; теперь это устарело, все современные браузеры (в том числе из Microsoft) обрабатывают CORS в XMLHttpRequest. Но если вам нужно поддерживать устаревшие браузеры, эта страница описывает это:

Чтобы сделать запрос CORS, вы просто используете XMLHttpRequest в Firefox 3.5+, Safari 4+ и Chrome и XDomainRequest в IE8+. При использовании объекта XMLHttpRequest, если браузер видит, что вы пытаетесь выполнить кросс-доменный запрос, он будет легко запускать поведение CORS.

Вот функция javascript, которая поможет вам создать объект CORS для кросс-браузера.

function createCORSRequest(method, url){
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr){
        // XHR has 'withCredentials' property only if it supports CORS
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined"){ // if IE use XDR
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}

Опять же, это необходимо только для устаревших браузеров.

Из приведенных выше причин вы не можете использовать веб-службы Amazon из своего script. И сервер Amazon будет разрешать загрузку своих файлов JavaScript на страницы, обслуживаемые из выбранных доменов.

Чтобы ответить на ваши пронумерованные вопросы:

• • Файл будет загружен браузером, если он находится в том же месте.
  • Если это не то же самое происхождение, файл будет загружен, если запрос CORS будет успешным.
  • Или иначе загрузка script завершится с ошибкой.
  • Если загрузка завершится успешно, содержимое файла JavaScript будет загружено в память браузера, интерпретировано и выполнено.

• См. описание на CORS для понимания.

Ответ 2

CORS - это параметр, который необходимо изменить на сервере. Он позволяет запрашивать ресурсы на веб-странице внешним доменом. Простое изменение кода на клиенте не изменит функциональность CORS.

Причина, по которой вы можете получить доступ к странице из тега script, связана с тем, что теги обрабатываются иначе, чем все другие данные для запросов на кросс-поиск. В старые времена вы можете "взломать" CORS на свою систему, используя JSONP, который хранит данные JSON внутри HTML-тегов.

Чтобы включить CORS в Apache:

Сначала найдите свой httpd.conf, набрав

ps -ef | grep apache

Что даст вам местоположение Apache. Как только вы найдете этот тип:

 <apache-location> -V

Что вернет точное местоположение вашего httpd.conf, например:

 -D SERVER_CONFIG_FILE="/etc/apache2/apache2.conf"

Теперь вам нужно перейти на httpd.conf и ввести "/" для поиска <directory>. Как только вы найдете тег, сразу после него введите:

Header set Access-Control-Allow-Origin "*"

Сохраните файл и подтвердите правильность синтаксиса, выполнив:

apachectl -t

Если это произойдет, запустите команду изящного перезапуска:

apachectl -k graceful

Как только сервер перезагрузится, ваши файлы теперь будут доступны через внешние скрипты.

Если вы не можете сохранить конфигурацию из-за ошибки, попробуйте выйти из своего редактора и набрав:

sudo chmod 755 httpd.conf

Это дает владельцу полный доступ к файлу конфигурации, но все остальные могут читать только его выполнение (http://en.wikipedia.org/wiki/Chmod).

Чтобы протестировать эти изменения, на внешнем сервере создайте новый файл index.html и загрузите его следующим образом:

<!doctype html>
<html>
    <head>
    <title>TEST</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <!-- Insert Scripts & CSS Here -->
    <link rel="stylesheet" type="text/css" href="#" onclick="location.href='http://d1e24pw9mnwsl8.cloudfront.net/c/bootstrap/css/bootstrap.min.css'; return false;">
    </head>

    <body>

        <script>
        jQuery.get('yourwebsite.com/file.csv', function(data) {
        document.write(data);
        });
        </script>

    </body>

</html>

Результирующий вывод должен отображать прямую передачу данных на вашем веб-сайте yourwebsite.com/file.csv

Если загрузка этой страницы html не выводится, нажмите f12 на firefox, чтобы открыть консоль разработчика. Скорее всего, вы увидите сообщение об ошибке:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at yourwebsite.com/file.csv. This can be fixed by moving the resource to the same domain or enabling CORS.

Это означает, что: а) ваш httpd.conf не был настроен правильно/не был сохранен или b) вы забыли перезапустить веб-сервер.