Ajax 跨域解决(一)——SpringBoot学习

·

什么是跨域

在目前的前后端分离开发模式下,前端使用 Ajax 访问后端提供的接口获取数据,产生报错。

跨域发生的原因

1. 浏览器的限制

2. 发生跨域访问

3. 发送的是 XHR(XMLHttpRequst) 请求

三者同时发生,就会发生跨域问题

解决方式

因为是三者同时发生,才能发生跨域问题,因此针对三者,处理其中的一个即可。

首先是浏览器的限制,需要指定参数让浏览器不做校验,但方法不太合理,需要每个人都去做修改。其次是发送的请求不要是 XHR 类型的,解决方式是 JSONP 。最后是针对跨域,分为两点,一是让被调用方支持跨域,在响应头中添加参数,表示支持跨域访问,核心是支持跨域,二是让调用方在请求中使用代理,将从 A 域名发送到 B 的请求通过代理,让 B 认为是从本域名来的,核心是隐藏跨域。

具体解决方式

针对浏览器,通过命令行的方式启动,让其不要做跨域校验即可。

1 eg:chrome --disable-web-security
 

针对 XHR 方式,本身浏览器发送的是 json 请求,通过 jsonp 的方式,将其变为 js 的方式,核心是通过动态添加 script 的方式来封装了请求,从而解决跨域问题。

使用这种方式需要修改服务端的代码,修改方式如下:

@ControllerAdvice

public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice (

    public JsonpAdvice() {

        super("callback");

    }

}

前端通过制定 dataType 的方式来发送请求,如下所示

$.ajax({

    url:base+"/get1",

    dataType: "jsonp",

    jsonp: "callback",

    cache: true,

    type:"post",

    success:function(json){

        result = json;
    }
})

但使用这种方式仍然是不好的方式,其有如下弊端

1. 需要服务器端改变代码,如果涉及调用第三方接口,根本无法完成;

2. 只支持 GET 请求,在真是的业务场景中十分受限;

3. 因为改变了请求的类型,从 XHR 变为了 js 方式,因此 XHR 的很多优良特性无法使用。

因此,解决跨域问题最好的方式还是通过解决跨域访问来解决,使用服务器端支持跨域或调用端隐藏跨域来解决。

?

调用方解决跨域(支持跨域)的3种解决方式

1. 服务器端实现

2. Nginx 配置

3. Apache 配置

使用 Filter 来实现

通过过滤器在所有请求的 Response 中添加字段来支持跨域访问。

 1 public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
 2
 3     HttpServletRequest req = (HttpServletRequest) request;
 4
 5     HttpServletResponse res = (HttpServletResponse) response;
 6
 7     String origin =req.getHeader("Origin");
 8
 9     if (!StringUtils.isEmpty(origin)){ // 动态添加访问地址,使得所有的域名都可以跨域访问
10
11         res.addHeader("Access-Control-Allow-Origin",origin);
12
13     }
14
15     String headers = req.getHeader("Access-Control-Request-Headers");
16
17     if (!StringUtils.isEmpty(headers)){ // 动态添加自定义访问头
18
19         res.addHeader("Access-Control-Allow-Headers",headers);
20
21     }
22
23     res.addHeader("Access-Control-Allow-Methods","*");
24
25     res.addHeader("Access-Control-Max-Age","3600");
26
27     res.addHeader("Access-Control-Allow-Credentials","true");
28
29     chain.doFilter(request,response);
30
31 }
32
33
34
35 @Bean
36
37 FilterRegistrationBean registrationBean(){
38
39     FilterRegistrationBean<Filter> filterRegistrationBean = new FilterRegistrationBean();
40
41     filterRegistrationBean.addUrlPatterns("/*");
42
43     filterRegistrationBean.setFilter(new CrosFilter());
44
45     filterRegistrationBean.setOrder(Ordered.HIGHEST_PRECEDENCE);
46
47     filterRegistrationBean.setName("Ajax");
48
49     return filterRegistrationBean;
50
51 }
 

被调用方解决跨域(隐藏跨域)的解决方式

在 Spring 框架中的解决方式:在需要的类或方法上加上注解, @CrossOrigin

Nginx 配置

Apache 配置

Nginx 和 Apache 的解决方式因为涉及到其两个框架的方式,因为还没有深入了解过,所以在这没有叙述,以后深入学习过后,再详细编写。

原文地址:https://www.cnblogs.com/JRookie/p/Ajax-SpringBoot.html

时间: 2024-08-01 00:45:18

Ajax 跨域解决(一)——SpringBoot学习的相关文章

ajax 跨域解决方法

最近在开发过程中,使用ajax去异步调取图片.在开发中这个功能没什么问题,可以后来提测,重新部署之后就有问题了,这就是ajax的跨域问题. ajax本身是不支持跨域的,这是由于javascript的同源策略所导致.但是我们可以通过其他方法来解决ajax的跨域问题. 1  由于我们是利用了jquery来写的ajax,我们一开始是准备 利用jsonp来解决的,客户端类似下面写法 $.ajax({ type : "get", async:false, url : "http://w

ajax跨域解决办法

在使用jquery的ajax作请求时,http://127.0.0.1:8080,类似这样的一个本地请求,会产生跨域问题, 解决办法一: jsonp: var url= "http://127.0.0.1:8080/botinterface/?p1="+input+"&callback=?"; jQuery('#input').val(''); replaceText('me',input); $.ajax({ type: "POST",

AJAX跨域解决方法

跨域,简单地理解就是因为浏览器基于安全的同源策略限制不同域名和协议之间的互相访问. 而AJAX的跨域请求,其实浏览器并没有限制不同域的网络请求,只是浏览器会基于请求返回响应头做处理,如果发现是跨域请求且响应头Access-Control-Allow-Origin未对请求来源设置允许,则根据非同源禁止策略,浏览器不会将服务端返回的数据交给AJAX,这样就会阻止不同域之间的数据交互. 1)服务端对访问的来源设置Access-Control-Allow-Origin响应头许可: 2)JSONP jso

ajax跨域解决

https://blog.csdn.net/csdn_ds/article/details/73691134 Access-Control-Allow-Origin 跨域设置多域名:http://www.jianshu.com/p/b587dd1b7086 原文地址:https://www.cnblogs.com/pjlhf/p/8806872.html

HBuilder开发app ajax跨域 解决XMLHttpRequest

<div id="a1" onclick="testXHR()" style="font-size: 5em;">sss1</div>   <script type="text/javascript">         var url = 'http://192.168.0.122/lxty/index.php/index/index/testajax';           var dat

20K前端开发面试题:关于如何回答ajax跨域问题

在接触前端开发起,跨域这个词就一直以很高的频率在我们学习工作中重复出现,最近在工作中遇到了跨域的相关问题,这里我把它总结记录一下. 关于跨域,有N种类型,现在我只专注于ajax请求跨域(ajax跨域只是属于浏览器"同源策略"中的一部分,其它的这里不做介绍),内容大概如下:什么是ajax跨域?如何解决ajax跨域?如何分析ajax跨域? 一.什么是Ajax跨域 Ajax跨域的原理 ajax出现请求跨域错误问题,主要原因就是因为浏览器的"同源策略". CORS请求原理

前端筑基篇(一)-&gt;ajax跨域原理以及解决方案

说明 跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题 前言 参考来源 什么是跨域 ajax跨域的表现 跨域的原理 如何解决跨域问题 JSONP方式解决跨域问题 CROS解决跨域问题 CROS请求原理 PHP后台配置 JAVA后台配置 .NET后台配置 FAQ multi value '*,*' 的问题 前言 强烈推荐阅读参考来源中的文章,能够快速帮助了解跨域的原理 参考来源 本文参考了以下来源 浏览器同源政策及其规避方法(阮一峰) 跨域资源共享 CORS

ajax跨域原理以及解决方案

说明 跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题 前言 强烈推荐阅读参考来源中的文章,能够快速帮助了解跨域的原理 参考来源 本文参考了以下来源 浏览器同源政策及其规避方法(阮一峰) 跨域资源共享 CORS 详解(阮一峰) 什么是跨域 为了更了解跨域的原理,可以阅读参考来源中的文章,里面对跨域的原理讲解很详细到位 ajax跨域的表现 ajax请求时,如果存在跨域现象,并且没有进行解决,会有如下表现 第一种现象:No 'Access-Control-All

ajax 跨域----好用的解决方案

一.前言 跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了! 但是感觉还是差了点什么,于是现在重新梳理了一下.个人见识有限,如有差错,请多多见谅 二.前言 关于跨域,有N种类型,本文只专注于 ajax请求跨域(ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍),内容大概如下: 什么是ajax跨域 原理 表现(整理了一些遇到的问题以及解决方案) 如何解决ajax跨