Теперь давайте обсудим связанные с этим вопросы данных о междоменных данных браузера. Может быть не очень стандартно сказать, что это связано с тем, что отклонение данных о перекрестном доменах не является уникальным для браузера. Причина, по которой междомен не может запросить данные, заключается в том, что браузеры в основном реализуют спецификацию безопасности, называемую «политикой одинакового происхождения». Какова конкретная спецификация? Мы нашли профиль на MDN со следующим адресом:
Объяснение гомологичной политики браузера
В целом, когда URL A и URL B различаются с точки зрения протокола, порта и доменного имени, браузер инициирует политику с одинаковым происхождением и отказаться между серверами A и B.
Говоря о той же оригинальной стратегии, знания, которые вы получаете, являются мелкими. Вы должны практиковать это самостоятельно. Как отражается та же оригинальная стратегия? Ниже я продемонстрирую шаг за шагом в сочетании с кодом.
1. Сервер A не может запросить сервер B
Поскольку это междомен, я предполагаю, что у меня есть два доменных имена, а именно A и Localhost. Означает, что редактор разнимает доменное имя в Alibaba Cloud. Localhost, как следует из названия, является моей машиной разработки. Мы представляем сценарий, в котором мы развертываем файл index.html на Localhost, простую сервис бэкэнд с пружиной на сервере A и предоставляем простой интерфейс, чтобы выставить его на файл index.html. Наконец, браузер запрашивает файл index.html Localhost и посмотреть, что подсказывает браузер?
index.html
<!DOCTYPE html><html><head><title>Test cross-domain access</title><meta charset="utf-8"/></head><body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $ (document) .ready (function () {$ .ajax ({type: «get», async: true, url: «http: //a/hello/map/getuser.json», // Тип интерфейса запроса на сервере A: «json», успех: функция (data) {// print returned data console. </script> <h2> Hello World </h2> </body> </html>Запросите файл index.html в браузере, и он отображается следующим образом:
Можно обнаружить, что запрос был отклонен браузером, что побудило нас не разрешать перекрестные запросы. Это очень неудобно. Как это решить?
2. Используйте JSONP для разрешения перекрестных запросов
Во -первых, давайте поговорим о принципе. JSONP решает проблемы с междоменом в основном использует перекрестную до 12-летнюю метку тега <cript>, то есть к функции, к которой обращается адрес ссылки в атрибуте SRC, можно получить доступ к доменам, потому что мы часто устанавливаем значение атрибута SRC на адрес CDN, и соответствующая библиотека JS была загружена.
index.html
<!DOCTYPE html><html><head><title>Test cross-domain access</title><meta charset="utf-8" /></head><body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $ (document) .ready (function () {$ .ajax ({type: «get», async: true, jsonp: «callbackname», // backend interface name name jsonpcallback: «callbackfunction», // url function url: «http: //a/hello/map/getuser.json», j., //hello/maper.json ». jsonp успех: function (data) {console.log ("Успех"); </script> <script type = "text/javascript"> var callbackfunction = function (data) {alert ('Данные, возвращаемые интерфейсом:' + json.stringify (data)); }; </script> </body> </html>Код интерфейса на сервере:
/** * * Класс jsonbackcontroller. * * Описание: Контроллер возвращает серию простых данных JSON, а данные JSON состоит из простого объекта пользователя * * @author: huangjiawei * @since: 12 июня 2018 * @version: $ redion $ $ date $ $ $ Loggerfactory.getlogger (jsonbackcontroller.class); / *** Разрешение данных запроса кросс-домен* @param response* @param callbackname front-end function function* @return*/ @requestmapping (value = "getUser.json") public void getUser (httpservlectresponse, @requestparam stringbackname) {пользователь пользователя = новый пользователь ("huangwew, @requestparam callbackname) {user user = новый пользователь (" huangwew, 22); response.setContentType ("text/javaScript"); Писатель -писатель = null; try {writer = response.getWriter (); writer.write (callbackname + "("); writer.write (user.tostring ()); writer.write (");"); } catch (ioException e) {logger.error ("jsonp response write не удалось! Данные:" + user.tostring (), e); } наконец {if (writer! = null) {try {writer.close (); } catch (ioException e) {logger.Error ("Выходной поток Close Exception!", E); } writer = null; }}}}Бэкэнд проходит в имени функции обратного вызова параметра, а затем возвращает кусок кода JS на фронт. Формат кода JS выглядит следующим образом:
callbackName + ( data ) + ;
Браузер запрашивает файл index.html на сервере LocalHost, и результат заключается в следующем:
Вышеупомянутый метод решает перекрестные задачи через jquery + jsonp. Разве вы просто не сказали, что можете использовать атрибут SRC тега <Script>? Четыре
index.html на сервере Localhost
<!DOCTYPE html><html><head><title>Test cross-domain access</title><meta charset="utf-8" /></head><body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> var callbackfunction = function (data) {alert ('Данные, возвращаемые интерфейсом:' + json.stringify (data)); }; </script> <script type = "text/javascript" src = "http: //a/hello/map/getuser.json? Callbackname = callbackfunction"> </script> </body> </html>Эффект отображения браузера такой же, как и выше. Но здесь следует отметить, что SRC означает введение файла JS. Поскольку он называется непосредственно интерфейсом, а данные, возвращаемые интерфейсом, являются частью кода JS, его можно выполнить. Кроме того, порядок второго тега <Script> не может быть изменен, в противном случае функция обратной связи не будет найдена.
Адрес кода проекта: https://github.com/smallercoder/jsonpdemo
Наконец, мы приведем в качестве обобщения, что существует множество решений для междоменных решений, и JSONP-это лишь одна из них, и конкретная ситуация должна быть подробно проанализирована. Я надеюсь, что эта статья будет вам полезна. Спасибо за чтение. Добро пожаловать в GitHub, чтобы начать, Момо! Я также надеюсь, что все будут поддерживать Wulin.com больше.