Различные учебные пособия по кросс-домену, различные практики и различные вопросы и ответы. В дополнение к простому JSONP, многие люди говорят, что COR не работают, и им всегда не хватает одной или двух ключевых конфигураций. Эта статья только хочет решить проблему, и весь код практиковался на вас.
Эта статья решает такие проблемы, как Get, Post, Data и Cookies в кросс-домене.
В этой статье рассказывается только о запросах GET и публикации запросов. Читатели должны понимать запросы Post как все другие методы запроса, кроме получения запросов.
Jsonp
JSONP использует принцип, согласно которому браузер не имеет гомологических ограничений на ссылки на ресурсы сценариев и динамически вводит тег сценария и будет выполнен сразу после загрузки ресурса на странице. JSONP - это неформальный протокол передачи. Одним из ключевых моментов этого протокола является позволить пользователям передавать обратный вызов или определить метод обратного вызова в начале, а параметры передаются серверу. Когда сервер возвращает данные, параметр обратного вызова будет использоваться в качестве имени функции для обертывания данных JSON, чтобы клиент мог настроить свои собственные функции для автоматического обработки данных возврата.
JSONP поддерживает только запросы GET, но не другие типы HTTP -запросов, таких как Post. Он поддерживает только междоменные HTTP-запросы. Он не может решить проблему того, как сделать вызовы JavaScript между двумя страницами в разных областях. Преимущество JSONP заключается в том, что он поддерживает старомодные браузеры, и недостатки также очевидны: для разработки требуется настройка клиента и сервера. Данные, возвращаемые сервером, не могут быть стандартными данными JSON, но данные, обернутые обратным вызовом.
Принцип JSONP очень прост, и он использует идею [не существует проблемной проблемы, когда передняя часть запрашивает статические ресурсы].
Но это только поддерживает Get, только поддержка Get, только поддержка Get.
Обратите внимание, что, поскольку этот метод называется JSONP, данные бэкэнд должны использовать данные JSON. Вы не можете сделать строку или что -то небрежно, иначе вы найдете результат необъяснимым.
Метод написания JQUERY FROND
$ .ajax ({type: "get", url: baseurl + "/jsonp/get", datatype: "jsonp", успех: function (response) {$ ("#response"). val (json.stringify (response));}});DataType: "jsonp". За исключением этого, другие конфигурации такие же, как и обычные запросы.
Бэкэнд -конфигурация Springmvc
Если вы также используете SpringMVC, то настройте советы JSONP, чтобы каждый метод контроллера, который мы пишем, не нужно учитывать, запрашивает ли клиент JSONP, и Spring автоматически обрабатывает его соответствующим образом.
@Controlleradvicepublic class jsonpadvice extraves AbstractJsonPresponsebodyAdvice {public jsonPadvice () {// таким образом, если запрос содержит параметр обратного вызова, весна будет знать, что это супер -запрос JSONP («обратный вызов»); }}Приведенный выше метод написания требует, чтобы версия SpringMVC не была ниже 3.2, и я могу только сказать, что вам следует обновить.
Бэкэнд на конфигурации без SPRINGMVC
Когда я впервые начал работать, Struts2 все еще был популярен. Через несколько лет SpringMVC в основном доминировал на внутреннем рынке.
Будь ленивым, вот псевдокод, и нажмите метод обертывания, прежде чем наш метод вернется к передней части:
@Controlleradvicepublic class jsonpadvice extraves AbstractJsonPresponsebodyAdvice {public jsonPadvice () {// таким образом, если запрос содержит параметр обратного вызова, весна будет знать, что это супер -запрос JSONP («обратный вызов»); }}Корр
Обмен перекрестными ресурсами
CORS-это способ, которым современные браузеры поддерживают перекрестные запросы ресурсов. Полное имя-«CrossOriginResourcesharing». При отправке запроса с использованием xmlhttprequest браузер обнаруживает, что запрос не соответствует политике одинаковой иоригины и добавит заголовок запроса в запрос: Origin. Фон выполняет серию обработки. Если это определено, чтобы принять запрос, к результату возврата добавляется заголовок ответа: access-control-ownlygin; Браузер определяет, содержит ли соответствующий заголовок значение происхождения. Если есть, браузер обработает ответ, и мы можем получить данные ответа. Если браузер не включает браузер, мы не можем получить данные ответа.
CORS и JSONP используют ту же цель, но она более мощная, чем JSONP. CORS поддерживает все типы запросов браузера, а объем запрошенных данных больше, более открыты и кратко. Сервер должен только возвращать обработанные данные напрямую, и нет необходимости в специальной обработке.
В конце концов, JSONP только поддерживает запросы, которые определенно не могут удовлетворить все наши потребности в запросе, поэтому CORS нужно вывести.
Внутренние веб -разработчики все еще довольно сложны. Пользователи не обновляют свои браузеры, и босс по -прежнему хочет, чтобы разработчики были совместимы.
CORS поддерживает следующие браузеры. В настоящее время проблемы браузера становятся все менее и менее важными, и даже Таобао не поддерживает IE7 ~~~
Хром 3+
Firefox 3.5+
Opera 12+
Сафари 4+
Internet Explorer 8+
Метод написания JQUERY FROND
Просто посмотрите на код:
$ .ajax ({type: «post», url: baseurl + "/jsonp/post", datatype: 'json', crossdomain: true, xhrfields: {withcredentials: true}, data: {name: "name_from_frontend"}, успех: function (response) {console.l (ответ)/ $ ("#response"). val (json.stringify (response));DataType: «json», вот JSON, а не JSONP, а не JSONP, а не JSONP.
CrossDomain: Правда, здесь означает использование перекрестных запросов
xhrfields: {withCredentials: true}, чтобы конфигурация могла принести файлы cookie, в противном случае мы не можем даже поддерживать сеанс, и многие люди здесь пойманы в ловушку. Конечно, если у вас нет этого требования, вам не нужно это настроить.
Бэкэнд -конфигурация Springmvc
Для большинства веб-проектов обычно проводится классы конфигурации, связанные с MVC, которые унаследованы от WebmvcconfigurerAdapter. Если вы также используете Springmvc 4.2 или выше, просто добавьте этот метод, например, следующее:
ConfigurationPublic Class WebConfig Extends webmvcconfigurerAdapter {@Override public void AddCorsMappings (реестр CorsRegistry) {Registry.Addmapping ("/**/*"). AldorIgins ("*"); }}Если вы, к сожалению, в своем проекте, версия SpringMVC ниже 4,2, то вам нужно «спасти страну через кривые»:
Общедоступный класс CrossDomainFilter Extens OncePerquestFilter {@Override Protected void DoFilterInternal (httpservletRequest, httpserservletresponse ответ, Filterchain Filterchain) Throws ServletException, ioException {response.addheader («Доступен-control-allow-origin», «не может быть», «не может быть»; Down On response.Addheader ("Access-Control-Allow-Credentials", "True"); response.addheader ("Access-Control-Methods", "Get, Post, Plot, Delete"); response.addheader («Контроль доступа к управлению», «Контент-тип»); FilterChain.dofilter (запрос, ответ); }}Настройте фильтр в web.xml:
<filter> <filter-name>CrossDomainFilter</filter-name> <filter-class>com.javadoop.filters.CrossDomainFilter</filter-class></filter><filter-mapping> <filter-name>CrossDomainFilter</filter-name> <url-pattern>/*</url-pattern></filter-mapping>
Есть много проектов, которые используют Shiro, и вы также можете настроить фильтры Shiro, поэтому я не буду их представить здесь.
Обратите внимание, что я говорю об очень общих конфигурациях, которые можно настроить в таких общих конфигурациях для большинства проектов. Читатели должны знать, как соответствовать конфигурациям, как «*» в статье.
Если читатель обнаруживает, что браузер подсказывает, что символ «*» не может быть использован, то читатель может получить реферика (refest.getheader («Реферат») в заголовке запроса в соответствии с объектом запроса в приведенном выше фильтре, а затем динамически установил «доступ к доступу-аволоу-аволюру»:
String referer = request.getheader ("referer"); if (stringUtils.isnotblank (referer)) {url url = new url (референция); String Origin = url.getProtocol () + ": //" + url.gethost (); response.addheader ("Access-Control-Allow-Origin", Origin);} else {response.addheader ("Access-Control-Allow-Origin", "*");}Фронт-энд не JQUERY
Дни, когда вы едите jQuery с одним трюком, полностью исчезли. Здесь я расскажу о том, как решить проблему Post Cross-Domain, если вы не используете jQuery.
Давайте представим местный JS:
функция CreateCorsRequest (Method, URL) {var xhr = new xmlhttprequest (); if ("withCredentials" в xhr) {// Если есть атрибут с Credentials, это определенно объект xmlhttprequest2. Посмотрите на третий параметр xhr.open (метод, url, true); } else if (typeof xdomainrequest! = "undefined") {// Этот объект используется IE для запроса в доменах xhr = new xdomainrequest (); xhr.open (метод, URL); } else {// Если так, к сожалению, браузер не поддерживает cors xhr = null; } return xhr;} var xhr = createCorsRequest ('get', url); if (! xhr) {бросить новую ошибку ('cors не поддерживается');}Среди них, Chrome, Firefox, Opera и Safari, эти «дружественные к программистам» браузеры используют объекты Xmlhttprequest2. IE использует XdomainRequest.
Суммировать
Вышеупомянутое дело о быстрой решении проблем с перекрестным запросом: JSONP и CORS. Я надеюсь, что это будет полезно для всех. Заинтересованные друзья могут продолжать ссылаться на другие связанные темы на этом сайте. Если есть какие -либо недостатки, пожалуйста, оставьте сообщение, чтобы указать это!