使用https和响应头来解决浏览器跨域

前言

博主的使用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协议连接。

sameSite

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的效果。

login请求

postUserName请求

博主微信公众号