跨域，以及跨域的解决方式（nginx代理、javaWeb）

ゞ浴缸里的玫瑰 2021-09-24 18:58 457阅读 0赞

## 跨域，以及跨域的解决方式（nginx代理、javaWeb） ##

### 文章目录 ###

*   *  跨域，以及跨域的解决方式（nginx代理、javaWeb）
     *  1、什么是跨域
     *  2、跨域的解决方式
     *   *  2.1、使用 JSONP 解决跨域问题
         *  2.2、使用 CORS（跨资源共享）解决跨域问题
         *  2.3、nginx解决配置
         *  2.4、java服务端解决配置

## 1、什么是跨域 ##

在浏览器端进行 Ajax 请求时会出现跨域问题，那么什么是跨域，如何解决跨域呢？先看浏览器端出现跨域问题的现象，如下图所示：

![0f7925dc9b55a8e24a4a72e6b5b941ce.png][]

`跨域`：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

`同源`：域名，协议，端口均相同；

不同源的限制：

无法读取网页的 Cookie、LocalStorage……

无法获取网页的 DOM

无法发送 AJAX 请求

## 2、跨域的解决方式 ##

### 2.1、使用 JSONP 解决跨域问题 ###

JSONP（JSON with Padding）是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

由于同源策略，一般来说位于 `xxx.com` 的网页无法与 `xxx1.com` 的服务器沟通，而 HTML 的 `<script>` 元素是一个例外。

利用 `<script>` 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。

用 JSONP 抓到的资料并不是 JSON，而是任意的 JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析（需要目标服务器配合一个 `callback` 函数）。

### 2.2、使用 CORS（跨资源共享）解决跨域问题 ###

CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。

CORS 需要浏览器和服务器同时支持。

目前，所有浏览器都支持该功能，IE 浏览器不能低于 IE10。整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。

对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。

浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信（在 `header` 中设置：`Access-Control-Allow-Origin`）；

1.  `Access-Control-Allow-Origin`: 允许跨域访问的域，可以是一个域的列表，也可以是通配符”\*”；
2.  `Access-Control-Allow-Methods`: 允许使用的请求方法，以逗号隔开；
3.  `Access-Control-Allow-Headers`: 允许自定义的头部，以逗号隔开，大小写不敏感；
4.  `Access-Control-Expose-Headers`: 允许脚本访问的返回头，请求成功后，脚本可以在XMLHttpRequest中访问这些头的信息
5.  `Access-Control-Allow-Credentials`: 是否允许请求带有验证信息，XMLHttpRequest请求的withCredentials标志设置为true时，认证通过，浏览器才将数据给脚本程序。
6.  `Access-Control-Max-Age`: 缓存此次请求的秒数。在这个时间范围内，所有同类型的请求都将不再发送预检请求而是直接使用此次返回的头作为判断依据，非常有用，大幅优化请求次数；

### 2.3、nginx解决配置 ###

server { 
            listen 80;
            add_header 'Access-Control-Allow-Origin'  '*';
            add_header 'Access-Control-Allow-Headers' 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With';
            location / { 
                proxy_pass  http://localhost:8888;
            }
        }

### 2.4、java服务端解决配置 ###

1、使用拦截器：配置请求头；

// 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加'/'
    response.setHeader("Access-Control-Allow-Origin", "*"); 
    // 提示OPTIONS预检时，后端需要设置的两个常用自定义头
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

2、springboot环境

/** * 跨域 * @return */
        @Bean
        public FilterRegistrationBean<CorsFilter> corsFilter() { 
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            CorsConfiguration config = new CorsConfiguration();
            config.setAllowCredentials(true);
            config.addAllowedOrigin("*");
            config.addAllowedHeader("*");
            config.addAllowedMethod("OPTIONS");
            config.addAllowedMethod("HEAD");
            config.addAllowedMethod("GET");
            config.addAllowedMethod("PUT");
            config.addAllowedMethod("POST");
            config.addAllowedMethod("DELETE");
            config.addAllowedMethod("PATCH");
            source.registerCorsConfiguration("/**", config);
            FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<CorsFilter>(new CorsFilter(source));
            bean.setOrder(0);
            return bea

[0f7925dc9b55a8e24a4a72e6b5b941ce.png]: /images/20210923/87135d63749942e7970d9121a3bc9c53.png