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