前言
博主的使用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的效果。
博主微信公众号
