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

前言

博主的使用nginx来解决浏览器跨域问题中,已经介绍了什么是浏览器跨域。接下来,博主来介绍一下怎么使用https和响应头来解决浏览器跨域问题。

解决跨域问题

这里介绍一下跨域实践的相关环境:

  • 前端程序:8182端口,部署在本地。
  • 后端程序1:8084端口,部署在本地。
  • 后端程序2:443端口,部署在阿里云服务器,采用域名访问(因为https证书绑定的是域名)

添加跨域响应头

使用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;
    }
}

在项目中添加了上面的代码之后,我们再来查看跨域的简单请求已经成功拿到数据。

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

跨域携带cookie

如果项目中使用了session会话,后端还需要添加一下允许浏览器携带跨域cookie的响应头。因为前端的请求没有携带之前的jsessionid,则后续的每次请求都相当于开启一个新的会话。

config.setAllowCredentials(true);

前端的ajax请求也需要修改配置,这时候如果只配置了前端,后端没有添加允许携带跨域cookie的响应头时,则会报错。

xhrFields: {
	withCredentials: true
}

前后端都进行配置之后,我们先查看一下跨域请求的响应头是否发生了变化。

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

但是前端的跨域请求还是没有传递cookie给后端,我们从google浏览器的控制台可以看到如下图所示的提示。浏览器只会在设置了sameSite=None 和 secure响应头时,才会传递数据。如果我们的响应头中没有设置sameSite头的话,浏览器会取默认值Lax,而secure头的话需要使用https协议连接。

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

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

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

博主微信公众号

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

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

上一篇:如何使用GIT上传自己的代码到码云?


下一篇:精讲响应式WebClient第2篇-GET请求阻塞与非阻塞调用方法详解