前言
博主的使用nginx来解决浏览器跨域问题中,已经介绍了什么是浏览器跨域。接下来,博主来介绍一下怎么使用https和响应头来解决浏览器跨域问题。
解决跨域问题
这里介绍一下跨域实践的相关环境:
- 前端程序:8182端口,部署在本地。
- 后端程序1:8084端口,部署在本地。
- 后端程序2:443端口,部署在阿里云服务器,采用域名访问(因为https证书绑定的是域名)
添加跨域响应头
从浏览器给出的跨越提示中,我们只需要在后端的响应中添加上跨域的响应头,博主这里使用的是springboot项目,代码如下:
@Configuration
public class CorsConfig
{
@Bean
public FilterRegistrationBean corsFilter()
{
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.addAllowedOrigin("*");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config);
FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
bean.setOrder(0);
return bean;
}
}
在项目中添加了上面的代码之后,我们再来查看跨域的简单请求已经成功拿到数据。
跨域携带cookie
如果项目中使用了session会话,后端还需要添加一下允许浏览器携带跨域cookie的响应头。因为前端的请求没有携带之前的jsessionid,则后续的每次请求都相当于开启一个新的会话。
config.setAllowCredentials(true);
前端的ajax请求也需要修改配置,这时候如果只配置了前端,后端没有添加允许携带跨域cookie的响应头时,则会报错。
xhrFields: {
withCredentials: true
}
前后端都进行配置之后,我们先查看一下跨域请求的响应头是否发生了变化。
但是前端的跨域请求还是没有传递cookie给后端,我们从google浏览器的控制台可以看到如下图所示的提示。浏览器只会在设置了sameSite=None 和 secure响应头时,才会传递数据。如果我们的响应头中没有设置sameSite头的话,浏览器会取默认值Lax,而secure头的话需要使用https协议连接。
https证书配置
博主这里使用的阿里云的https证书,没有配置的小伙伴先进行配置。博主这里将下载到的https证书放入springboot项目中的资源文件夹下,并在application.properties中进行配置。
server.port=443
server.ssl.key-store=classpath:XXX.pfx
server.ssl.key-store-password=XXX
server.ssl.key-store-type=PKCS12
重新设置响应头
在我们的程序配置完https证书之后,对于需要跨域携带的cookie可以采用重新设置响应头的方式来设置Cookie的SameSite和secure属性。
response.setHeader("Set-Cookie", "JSESSIONID="+session.getId()+"; Path=/; Secure; SameSite=None; HttpOnly");
如下图所示,login请求和postUserNamei请求的jsessionid相同,达到了跨域携带cookie的效果。