首先我们要先来认识一下什么是跨域?
- 跨域问题是浏览器为了安全实施的同源策略导致的,同源策略限制了来自不同源的document,脚本
- 跨域指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器施加的安全限制
什么是同源?
- 同源是指域名,协议,端口号均相同
为什么会出现跨域问题?
跨域是指a页面想要获取b页面的资源,但是这个时候a、b页面的协议、域名、端口、子域名不同,或是a页面为ip地址,b页为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源=
举例子:
域名:
主域名不同 http://www.baidu.com/index.html -->http://www.sina.com/test.js
子域名不同 http://www.666.baidu.com/index.html -->http://www.555.baidu.com/test.js
域名和域名ip http://www.baidu.com/index.html -->http://180.149.132.47/test.js
端口:
http://www.baidu.com:8080/index.html–> http://www.baidu.com:8081/test.js
协议:
http://www.baidu.com:8080/index.html–> https://www.baidu.com:8080/test.js
备注:
1、端口和协议的不同,只能通过后台来解决
2、localhost和127.0.0.1虽然都指向本机,但也属于跨域
如何解决?
后端解决:建立CorsConfig配置类
@Configuration
public class CorsConfig extends WebMvcConfigurationSupport {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 配置可以被跨域的路径,可以任意配置,可以具体到直接请求路径。
.allowedMethods("*") // 允许所有的请求方法访问该跨域资源服务器,如:POST、GET、PUT、DELETE等。
.allowedOrigins("*") // 允许所有的请求域名访问我们的跨域资源,可以固定单条或者多条内容,
// 如:“http://www.aaa.com”,只有该域名可以访问我们的跨域资源。
.allowedHeaders("*"); // 允许所有的请求header访问,可以自定义设置任意请求头信息。
super.addCorsMappings(registry);
}
在我们控制层的接口方法除加上 @CrossOrigin 前端正常请求 即可解决跨域问题