跨域:
指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是
浏览器对
javascript
施加的安全限制
。
同源策略
:是指协议,域名,端口都要相同,其中有一个不同都会产生跨域;
![](https://i-blog.csdnimg.cn/direct/08bc8624f98e4ecd8b1230391d5063db.png)
跨域流程:
![](https://i-blog.csdnimg.cn/direct/797cf75bc8ee41358e8857ea54d406a3.png)
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
跨域解决方案:
1.使用nginx部署为同一域:
![](https://i-blog.csdnimg.cn/direct/114eb2921f7947c8bcd444844a4c51de.png)
2.配置当此请求允许跨域:
添加响应头
• Access-Control-Allow-Origin
:支持哪些来源的请求跨域
• Access-Control-Allow-Methods
:支持哪些方法跨域
• Access-Control-Allow-Credentials
:跨域请求默认不包含
cookie
,设置为
true
可以包含
cookie
• Access-Control-Expose-Headers
:跨域请求暴露的字段
• CORS
请求时,
XMLHttpRequest
对象的
getResponseHeader()
方法只能拿到
6
个基本字段:
Cache-Control
、
Content-Language
、
Content-Type
、
Expires
、
Last-Modified
、
Pragma
。如
果想拿到其他字段,就必须在
Access-Control-Expose-Headers
里面指定。
• Access-Control-Max-Age
:表明该响应的有效时间为多少秒。在有效时间内,浏览器无
须为同一请求再次发起预检请求。请注意,浏览器自身维护了一个最大有效时间,如果
该首部字段的值超过了最大有效时间,将不会生效。
@Configuration
public class GulimallCorsConfiguration {
@Bean
public CorsWebFilter corsWebFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
//1、配置跨域
corsConfiguration.addAllowedHeader("*");//允许所有的请求头。
corsConfiguration.addAllowedMethod("*");//允许所有的请求方法,如 GET、POST、PUT 等。
corsConfiguration.addAllowedOrigin("*");//允许所有的源(Origin)发起跨域请求。
corsConfiguration.setAllowCredentials(true);//允许携带凭证(如 Cookie 等)。
source.registerCorsConfiguration("/**",corsConfiguration);//为所有的 URL 路径注册了上述跨域配置
return new CorsWebFilter(source);
}
}
注释其他项目跨域的配置文件,减少响应头,只允许一个通过:
例如: