三分钟简单了解跨域问题并解决

1，何为跨域？

在理解跨域问题之前，你先要了解同源策略和URL，简单叙述：

1）同源策略

三同：协议相同，域名相同，端口相同；

目的：保证用户信息安全，防止恶意网站窃取数据。同源策略是必须的，否则cookie可以共享。

2）URL

三部分组成：

<传输协议>://<internet主机域名或者IP地址:端口号>/<路径>

协议：//子域名.主域名:端口号/路径

http://www.123.com:8080/index.html

你只需要简单理解：协议，域名，端口号不同即为跨域，同时注意：域名www.123.com 对应域名ip:192.169.1.88 虽然都指向同一服务器，但也属于跨域

2，如何解决跨域问题

很简单，在此提供两种方法：

1）局部配置，在每个controller控制层加上注解@CrossOrigin即可；

2）全局配置,写个配置类，继承WebMvcConfigurerAdapter ，重写addCorsMappings方法即可，代码如下：

import org.springframework.context.annotation.Configuration;  
import org.springframework.web.servlet.config.annotation.CorsRegistry;  
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;  

@Configuration  
public class CorsConfig extends WebMvcConfigurerAdapter {  

    @Override  
    public void addCorsMappings(CorsRegistry registry) {  
        registry.addMapping("/**")  
                .allowedOrigins("*")  
                .allowCredentials(true)  //是否允许发送cookie
                .allowedMethods("GET", "POST", "DELETE", "PUT")  
                .maxAge(3600);  
    }  

}

到此你基本了解并解决跨域问题，如果你只想知其然而不想知其所以然，到此即可。

3，CORS

跨域资源共享（corss-origin resource sharing）：CORS需要浏览器和服务器同时支持。目前所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。

浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。

只要服务器实现了CORS接口，就可以跨源通信。

CROS常见header：

1）Access-Control-Allow-Origin:http://localhost.com 表示允许http://localhost .com发起跨域请求。

2）Access-Control-Max-Age:3600 表示在3600 秒内不需要再发送预校验请求。

3）Access-Control-Allow-Methods: GET,POST,PUT,DELETE 表示允许跨域请求的方法。

4）Access-Control-Allow-Headers: content-type 表示允许跨域请求包含content-type，还有Authorization, Accept, Range, Origin

多个域名之间用逗号分隔，表示对所示域名提供跨域访问权限。"*"表示允许所有域名的跨域访问。

三分钟简单了解跨域问题并解决

猜你喜欢