天天看點

跨域問題淺了解跨域概念了解

跨域概念了解

跨域有了解嗎? 淺學習一下!!!

産生原因:

浏覽器因為安全考慮,設定了同源政策,用來防止非法攻擊【即目前發起請求的域與該請求所指向的資源所在的域必須一緻, 這裡的域是指協定、DNS域名、端口的合集,任何一個不相同都會出現跨域問題】;

哪些是跨域請求

跨域問題淺了解跨域概念了解

尤其現在開發是前後端分離的模式,前端和後端資源在不同的伺服器/不同端口上,從前端去擷取後端資源可能存在跨域問題;

舉例實踐

比如:使用浏覽器打開百度位址,目前在百度網站上域名是www.baidu.com 想要請求淘寶的網站www.taobao.com ,就是不同的域名,就可能會存在跨域資源共享問題;

跨域問題淺了解跨域概念了解

如果在百度上請求就是www.baidu.com 域名下面的其他資源,則不屬于跨域請求;

解決方案:

1.修改浏覽器的安全設定(不推薦)

2.CORS跨域資源共享(Cross-Origin Resource Sharing)

cors是浏覽器的一份技術規範,定義了跨域資源通路時,

浏覽器和伺服器之間如何通訊;使用自定義的http頭部允許浏覽器和伺服器建立通訊,進而避免浏覽器的同源政策;

先了解一下基礎内容

浏覽器将CORS請求的兩類:

跨域問題淺了解跨域概念了解
跨域問題淺了解跨域概念了解
cors需要浏覽器和伺服器同時支援

目前,所有浏覽器都支援cors跨域【IE浏覽器的版本不能低于10】,隻需要服務端做出處理即可;

由上面舉例實踐 可以看出提示: Failed to load https://www.taobao.com/: No ‘Access-Control-Allow-Origin’ header is present on the requested resource,請求的資源上不存在“Access Control Allow Origin”标頭,

那麼服務端隻需要添加 response.setHeader(“Access-Control-Allow-Origin”, “*”) 或 注解形式,比如Spring Boot現有支援的注解,可以加在類/方法上 @CrossOrigin(origins=“https://localhost:8081”) 或 添加配置的形式

Access-Control-Allow-Origin

舉例:

1.reponse傳回 在目前位址下可以允許來自https://www.baidu.com 域發送請求:

Access-Control-Allow-Origin: https://www.baidu.com

跨域問題淺了解跨域概念了解

2.可以允許來自所有域的請求:

Access-Control-Allow-Origin: *

3.JSONP

這個是屬于前端的一種解決方案,僅支援GET請求;

還有其他解決方法,後續學習補充…