Различные междоменные онлайн-руководства, различные практики и различные вопросы и ответы, в дополнение к простому jsonp, многие говорят, что CORS невозможен, поскольку всегда не хватает одной или двух ключевых конфигураций. Эта статья только хочет решить проблему, весь код отрабатывается мной.
В этой статье решаются проблемы с получением, публикацией, данными и файлами cookie в междоменном режиме.
Эта статья гласит только получение запросов и последующих запросов, читателей, пожалуйста, поймите запросы на почту в дополнение ко всем другим запросам за пределами запроса GET.
- Написание фронтенда на jQuery
- Конфигурация серверной части SpringMVC
- Конфигурация серверной части без SpringMVC
- Написание фронтенда на jQuery
- Конфигурация серверной части SpringMVC
- Написание внешнего интерфейса без jQuery
JSONP
Принцип jsonp очень прост, используя идею [нет проблем с междоменными связями, когда внешний интерфейс запрашивает статические ресурсы].
ноподдерживает только получение, только поддерживает получение, только поддерживает получение.
Обратите внимание, что поскольку этот метод называется jsonp, внутренние данные должны использовать данные json, и вы не можете просто сделать строку или что-то еще, иначе вы почувствуете, что результат необъясним.
Написание фронтенда на jQuery
$.ajax({
type: "get",
url: baseUrl + "/jsonp/get",
dataType: "jsonp",
success: function(response) {
$("#response").val(JSON.stringify(response));
}
});
Тип данных: "jsonp". В дополнение к этому другие конфигурации и обычные запросы одинаковы.
Конфигурация серверной части SpringMVC
Если вы также используете SpringMVC, вы можете настроить jsonp Advice, чтобы каждый написанный нами метод Controller не требовал рассмотрения того, является ли клиент вообще jsonp-запросом, и Spring автоматически выполнял соответствующую обработку.
@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {
public JsonpAdvice(){
// 这样如果请求中带 callback 参数，Spring 就知道这个是 jsonp 的请求了
super("callback");
}
}
Вышеуказанные требования правописанияВерсия SpringMVC должна быть не ниже 3.2., ниже 3.2 могу только сказать, надо обновиться.
Конфигурация серверной части без SpringMVC
Незадолго до работы времени Struts2 также популярный день, несколько лет до проекта, SpringMVC снижает основное правило внутреннего рынка.
Поленитесь, вставьте сюда псевдокод и настройте метод переноса до того, как наш метод вернется во внешний интерфейс:
public Object wrap(HttpServletRequest request){
String callback = request.getParameter("callback");
if(StringUtils.isBlank(callback)){
return result;
} else {
return callback+"("+JSON.toJSONString(result)+")";
}
}
CORS
Cross-Origin Resource Sharing
В конце концов, jsonp поддерживает только запросы на получение и, конечно же, не может удовлетворить все наши потребности в запросах, поэтому нам нужно отказаться от CORS.
Отечественные веб-разработчики по-прежнему борются: если пользователи не обновляют свои браузеры, босс по-прежнему хочет, чтобы разработчики сделали их совместимыми.
CORS поддерживает следующие браузеры.В настоящее время проблема браузеров становится все менее актуальной.Даже Taobao не поддерживает IE7~~~
- Chrome 3+
- Firefox 3.5+
- Opera 12+
- Safari 4+
- Internet Explorer 8+
Написание фронтенда на jQuery
Просто посмотрите на код:
$.ajax({
type: "POST",
url: baseUrl + "/jsonp/post",
dataType: 'json',
crossDomain: true,
xhrFields: {
withCredentials: true
},
data: {
name: "name_from_frontend"
},
success: function (response) {
console.log(response)// 返回的 json 数据
$("#response").val(JSON.stringify(response));
}
});
DataType: «JSON», это JSON, а не JSONP, а не JSONP, а не JSONP.
crossDomain: правда, это представляет использование междоменных запросов
xhrFields: {withCredentials: true}, так что конфигурация может принести куку, иначе мы даже не сможем поддерживать сессию, а тут много людей подсажено. Конечно, если у вас нет этого требования, вам не нужно настраивать это.
Конфигурация серверной части SpringMVC
Для большинства веб-проектов обычно существуют классы конфигурации, связанные с mvc, которые наследуются от WebMvcConfigurerAdapter. Если вы также используете SpringMVC 4.2 и выше, просто добавьте этот метод следующим образом:
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**/*").allowedOrigins("*");
}
}
Если, к сожалению, версия SpringMVC в вашем проекте ниже 4.2, то нужно "спасать страну по кривой":
public class CrossDomainFilter extends OncePerRequestFilter {
@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
response.addHeader("Access-Control-Allow-Headers", "Content-Type");
filterChain.doFilter(request, response);
}
}
Настройте фильтр в web.xml:
<filter>
<filter-name>CrossDomainFilter</filter-name>
<filter-class>com.zhongan.venus.web.filters.CrossDomainFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CrossDomainFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
Существует множество проектов с широ, также можно настроить фильтр широ способом, здесь не представленным.
Обратите внимание, что я говорю об очень общей конфигурации, которая может быть настроена таким образом для большинства проектов. Читатели должны знать, как настроить конфигурацию, аналогичную «*» в тексте.
Написание внешнего интерфейса без jQuery
Времена, когда jQuery был новым трюком, полностью прошли, здесь я расскажу о том, как решить проблему междоменного поста, если jQuery не используется.
Давайте представим нативный js:
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// 如果有 withCredentials 这个属性，那么可以肯定是 XMLHTTPRequest2 对象。看第三个参数
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// 此对象是 IE 用来跨域请求的
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// 如果是这样，很不幸，浏览器不支持 CORS
xhr = null;
}
return xhr;
}
var xhr = createCORSRequest('GET', url);
if (!xhr) {
throw new Error('CORS not supported');
}
Среди них Chrome, Firefox, Opera, Safari, эти «дружественные к программистам» браузеры используют объекты XMLHTTPRequest2. IE использует XDomainRequest.
Я думаю, что для 95% читателей этого достаточно, поэтому я не пойду дальше. Если читатели есть что-нибудь добавить, пожалуйста, оставьте сообщение в области комментариев.
(Конец полного текста)