Java跨域问题及解决跨域问题的方案(Jsonp、Nginx反向代理、CORS跨域资源共享)

1. 什么是跨域呢？

指的是跨域名的访问

举例

跨域原因	举例
域名不同	www.czxy.com    和    www.itheima.com
域名相同，端口号不同	www.czxy.com:8080    和    www.czxy.com:8081
二级域名不同	jiaoshi.czxy.com    和   xuesheng.czxy.com
不同的协议	https://www.czxy.com   和  http://www.czxy.com

 

 

因为跨域问题是浏览器对ajax请求的一种安全限制:  一个页面发起的ajax请求，只能是当前页面域名的路径。2. 为什么会跨域呢？

优点：可以有效的阻止跨站攻击。

缺点：给开发带来的不便，因为在实际生产环境中，肯定会有很多服务器之间交互，地址和端口都有可能不同。

3.解决跨域问题的方案

常用的解决跨域方案有3种:

1. jsonp

使用script标签原理实现。是最早的解决方案。

缺点：

• 需要服务的支持
• 只能发起GET请求

2.Nginx反向代理

利用Nginx反向代理把跨域变为不跨域，支持各种求情方式

Nginx作为作为程序入口，将请求分发到不同的服务

缺点： 需要额外配置Nginx，语义不清晰。

现在还是有不少公司在用。

3.CORS

一个W3C标准，全称为“跨域资源共享”(Cross-origin resource sharing)。

规范化的跨域请求解决方案，安全可靠。

它允许浏览器向跨域服务器，发出XMLHttpRequest请求，解决了ajax只能同域使用的限制。

CORS需要浏览器和服务器都支持，目前，所有的浏览器都支持。

• 优点：
  • 在服务端进行控制是否允许跨域，可自定义规则
  • 支持各种请求方式
• 缺点：
  • 会产生额外的请求

浏览器会将ajax请求分为两种: 简单请求, 特殊请求

简单请求

（1) 请求方法是以下三种方法之一：

HEAD

GET

POST

（2）HTTP的头信息不超出以下几种字段：

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

当浏览器发现发现的ajax请求是简单请求时，会在请求头中携带一个字段：Origin.

Origin中会指出当前请求属于哪个域（协议+域名+端口）。服务会根据这个值决定是否允许其跨域。

如果服务器允许跨域，需要在返回的响应头中携带下面信息：

Access-Control-Allow-Origin: http://www.czxy.com
Access-Control-Allow-Credentials: true
Content-Type: text/html; charset=utf-8

• Access-Control-Allow-Origin：可接受的域，是一个具体域名或者*，代表任意
• Access-Control-Allow-Credentials：是否允许携带cookie，默认情况下，cors不会携带cookie，除非这个值是true

注意：

如果跨域请求要想操作cookie，需要满足3个条件：

• 服务的响应头中需要携带Access-Control-Allow-Credentials并且为true。

• 浏览器发起ajax需要指定withCredentials 为true

• 响应头中的Access-Control-Allow-Origin一定不能为*，必须是指定的域名

特殊请求

不符合简单请求的条件，会被浏览器判定为特殊请求,，例如请求方式为PUT。

预检请求

特殊请求会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

一个“预检”请求的样板：

OPTIONS /cors HTTP/1.1
Origin: http://www.czxy.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.leyou.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

与简单请求相比，除了Origin以外，多了两个头：

• Access-Control-Request-Method：接下来会用到的请求方式，比如PUT

• Access-Control-Request-Headers：会额外用到的头信息

预检请求的响应

服务的收到预检请求，如果许可跨域，会发出响应：

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://www.czxy.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 1728000
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

转存失败重新上传取消 转存失败 重新上传 取消 转存失败重新上传取消 正在上传… 重新上传 取消 转存失败重新上传取消 正在上传… 重新上传 取消 转存失败重新上传取消 正在上传… 重新上传 取消 转存失败重新上传取消 正在上传… 重新上传 取消 转存失败重新上传取消 正在上传… 重新上传 取消 转存失败重新上传取消 正在上传… 重新上传 取消 转存失败重新上传取消 正在上传… 重新上传 取消 转存失败重新上传取消 转存失败 重新上传 取消 转存失败重新上传取消 转存失败 重新上传 取消 转存失败重新上传取消

除了Access-Control-Allow-Origin和Access-Control-Allow-Credentials以外，这里又额外多出3个头：

• Access-Control-Allow-Methods：允许访问的方式

• Access-Control-Allow-Headers：允许携带的头

• Access-Control-Max-Age：本次许可的有效时长，单位是秒，过期之前的ajax请求就无需再次进行预检了

如果浏览器得到上述响应，则认定为可以跨域，后续就跟简单请求的处理是一样的了。

Cors的使用:

编写配置类

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允许的域,不要写*，否则cookie就无法使用了
        config.addAllowedOrigin("http://www.czxy.com");
        //2) 是否发送Cookie信息
        config.setAllowCredentials(true);
        //3) 允许的请求方式
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        // 4）允许的头信息
        config.addAllowedHeader("*");

        //2.添加映射路径，我们拦截一切请求
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

转存失败重新上传取消 转存失败 重新上传 取消 转存失败重新上传取消 正在上传… 重新上传 取消 转存失败重新上传取消 正在上传… 重新上传 取消 转存失败重新上传取消 正在上传… 重新上传 取消 转存失败重新上传取消 正在上传… 重新上传 取消 转存失败重新上传取消 正在上传… 重新上传 取消 转存失败重新上传取消 正在上传… 重新上传 取消 转存失败重新上传取消 正在上传… 重新上传 取消 转存失败重新上传取消 转存失败 重新上传 取消 转存失败重新上传取消 转存失败 重新上传 取消 转存失败重新上传取消