因为浏览器使用了同源策略，所以产生跨域请求。一个网页向另一个不同域名/不同协议/不同端口的网页请求资源，这就是跨域。本篇文章提供了5种方式来解决网站跨域，感兴趣的朋友可以看看。

1、什么是跨越？

一个网页向另一个不同域名/不同协议/不同端口的网页请求资源，这就是跨域。

跨域原因产生：在当前域名请求网站中，默认不允许通过ajax请求发送其他域名。

2、为什么会产生跨域请求？

因为浏览器使用了同源策略

3、什么是同源策略？

同源策略是Netscape提出的一个著名的安全策略，现在所有支持JavaScript的浏览器都会使用这个策略。同源策略是浏览器最核心也最基本的安全功能，如果缺少同源策略，浏览器的正常功能可能受到影响。可以说web是构建在同源策略的基础之上的，浏览器只是针对同源策略的一种实现。

4、为什么浏览器要使用同源策略？

是为了保证用户的信息安全，防止恶意网站窃取数据，如果网页之间不满足同源要求，将不能:

1、共享Cookie、LocalStorage、IndexDB

2、获取DOM

3、AJAX请求不能发送

同源策略的非绝对性：

1. <script></script> 
2.  
3. <img/> 
4.  
5. <iframe/> 
6.  
7. <link/> 
8.  
9. <video/> 
10.  
11. <audio/> 

等带有src属性的标签可以从不同的域加载和执行资源。其他插件的同源策略：flash、java applet、silverlight、googlegears等浏览器加载的第三方插件也有各自的同源策略，只是这些同源策略不属于浏览器原生的同源策略，如果有漏洞则可能被黑客利用，从而留下XSS攻击的后患

所谓的同源指：域名、网络协议、端口号相同，三条有一条不同就会产生跨域。 例如：你用浏览器打开http://baidu.com，浏览器执行JavaScript脚本时发现脚本向http://cloud.baidu.com域名发请求，这时浏览器就会报错，这就是跨域报错。

解决方案有五：

1、前端使用jsonp （不推荐使用）

当我们正常地请求一个JSON数据的时候，服务端返回的是一串 JSON类型的数据，而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ，所以我们只能把参数通过 url的方式传递,所以jsonp的 type类型只能是get示例：

1. $.ajax({ 
2.  
3.     url: 'http://192.168.1.114/yii/demos/test.php', //不同的域 
4.  
5.     type: 'GET', // jsonp模式只有GET 是合法的 
6.  
7.     data: { 
8.  
9.         'action': 'aaron' 
10.  
11.     }, 
12.  
13.     dataType: 'jsonp', // 数据类型 
14.  
15.     jsonp: 'backfunc', // 指定回调函数名，与服务器端接收的一致，并回传回来 
16.  
17. }) 

使用JSONP 模式来请求数据的整个流程：客户端发送一个请求，规定一个可执行的函数名（这里就是 jQuery做了封装的处理，自动帮你生成回调函数并把数据取出来供success属性方法来调用,而不是传递的一个回调句柄），服务器端接受了这个 backfunc函数名，然后把数据通过实参的形式发送出去

（在jquery 源码中， jsonp的实现方式是动态添加<script>标签来调用服务器提供的 js脚本。jquery 会在window对象中加载一个全局的函数，当 <script>代码插入时函数执行，执行完毕后就 <script>会被移除。同时jquery还对非跨域的请求进行了优化，如果这个请求是在同一个域名下那么他就会像正常的 Ajax请求一样工作。）

2、后台Http请求转发

使用HttpClinet转发进行转发(简单的例子 不推荐使用这种方式)

1. try { 
2.  
3.     HttpClient client = HttpClients.createDefault();            //client对象 
4.  
5.     HttpGet get = new HttpGet("http://localhost:8080/test");    //创建get请求 
6.  
7.     CloseableHttpResponse response = httpClient.execute(get);   //执行get请求 
8.  
9.     String mes = EntityUtils.toString(response.getEntity());    //将返回体的信息转换为字符串 
10.  
11.     System.out.println(mes); 
12.  
13. } catch (ClientProtocolException e) { 
14.  
15.     e.printStackTrace(); 
16.  
17. } catch (IOException e) { 
18.  
19.     e.printStackTrace(); 
20.  
21. } 

3、后台配置同源Cors （推荐）

在SpringBoot2.0 上的跨域 用以下代码配置 即可完美解决你的前后端跨域请求问题

1. import org.springframework.context.annotation.Bean; 
2.  
3. import org.springframework.context.annotation.Configuration; 
4.  
5. import org.springframework.web.cors.CorsConfiguration; 
6.  
7. import org.springframework.web.cors.UrlBasedCorsConfigurationSource; 
8.  
9. import org.springframework.web.filter.CorsFilter; 
10.  
11.  
12.  
13. /** 
14.  
15.  * 实现基本的跨域请求 
16.  
17.  * @author linhongcun 
18.  
19.  * 
20.  
21.  */ 
22.  
23. @Configuration 
24.  
25. public class CorsConfig { 
26.  
27.  
28.  
29.     @Bean 
30.  
31.     public CorsFilter corsFilter() { 
32.  
33.         final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource(); 
34.  
35.         final CorsConfiguration corsConfiguration = new CorsConfiguration(); 
36.  
37.         /*是否允许请求带有验证信息*/ 
38.  
39.         corsConfiguration.setAllowCredentials(true); 
40.  
41.         /*允许访问的客户端域名*/ 
42.  
43.         corsConfiguration.addAllowedOrigin("*"); 
44.  
45.         /*允许服务端访问的客户端请求头*/ 
46.  
47.         corsConfiguration.addAllowedHeader("*"); 
48.  
49.         /*允许访问的方法名,GET POST等*/ 
50.  
51.         corsConfiguration.addAllowedMethod("*"); 
52.  
53.         urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration); 
54.  
55.         return new CorsFilter(urlBasedCorsConfigurationSource); 
56.  
57.     } 
58.  
59. } 

4、使用SpringCloud网关

服务网关(zuul)又称路由中心，用来统一访问所有api接口，维护服务。

Spring Cloud Zuul通过与Spring Cloud Eureka的整合，实现了对服务实例的自动化维护，所以在使用服务路由配置的时候，我们不需要向传统路由配置方式那样去指定具体的服务实例地址，只需要通过Ant模式配置文件参数即可

5、使用nginx做转发

现在有两个网站想互相访问接口 在http://a.a.com:81/A中想访问 http://b.b.com:81/B 那么进行如下配置即可

然后通过访问 www.my.com/A 里面即可访问 www.my.com/B

1. server { 
2.  
3.         listen       80; 
4.  
5.         server_name  www.my.com; 
6.  
7.         location /A { 
8.  
9.             proxy_pass  http://a.a.com:81/A; 
10.  
11.             index  index.html index.htm; 
12.  
13.         } 
14.  
15.         location /B { 
16.  
17.             proxy_pass  http://b.b.com:81/B; 
18.  
19.             index  index.html index.htm; 
20.  
21.         } 
22.  
23.     } 

如果是两个端口想互相访问接口 在http://b.b.com:80/Api中想访问 http://b.b.com:81/Api 那么进行如下配置即可

使用nginx转发机制就可以完成跨域问题

1. server { 
2.  
3.         listen       80; 
4.  
5.         server_name  b.b.com; 
6.  
7.         location /Api { 
8.  
9.             proxy_pass  http://b.b.com:81/Api; 
10.  
11.             index  index.html index.htm; 
12.  
13.         } 
14.  
15.     } 

Tags: 网站跨域解决方式

分享到：