解讀前后端分離項目的跨域問題

更新時間：2024年11月28日 16:48:48 作者：又菜又愛玩的晴晴

文章介紹了跨域問題的原因——瀏覽器的同源策略限制,以及CORS（跨域資源共享）的概念,CORS通過服務器設置特定的響應頭來允許跨域請求,文章還概述了后端解決跨域問題的幾種方式,并簡要介紹了前端處理跨域請求的方法

跨域問題的原因

根本原因：瀏覽器有同源策略限制，當前域名的js只能讀取同城下的窗口屬性，這是一個基礎安全功能

同源策略

若兩資源的URL中的協(xié)議、域名、端口都相同就成為同源，如果兩資源不同源，則不允許共享資源。

例如：http://www.baidu.com/a/hello.html

請求地址	結果	原因
http://www.baidu.com/a/java.html	成功	同一域名端口，相同文件夾
http://www.baidu.com/b/hello.html	成功	同一域名端口，不同文件夾
https://www.baidu.com/a/hello.html	失敗	不同協(xié)議，http與https
http://www.baidu.com:8081/a/java.html	失敗	不同端口，默認為8080端口
http://www.sina.com:8081/a/java.html	失敗	不同域名

跨域CORS

跨域就是解決不同域之間可以進行資源的相互訪問，為了避開瀏覽器的同源政策

CORS出現(xiàn)之前

瀏覽器接收到服務器回復—>檢查是否同源—>同源就響應，不同源就拒絕相應

CORS出現(xiàn)之后

瀏覽器接收到服務器回復 --> 檢查一下response header --> 發(fā)現(xiàn)有特定字段Access-Control-Allow-Origin --> 檢查這個header后面的值包不包含自己所在的域（打比方我們現(xiàn)在在www.baidu.com），瀏覽器檢查發(fā)現(xiàn)后response header里面寫的有Access-Control-Allow-Origin: https://www.baidu.com, 并且https://www.google.com正好我們在允許的域里面！ --> 瀏覽器響應服務器返回的數(shù)據(jù)(response)。

瀏覽器要實現(xiàn)的內(nèi)容：

接收到服務器的回復之后檢測回復頭里面是否含有特定字段！
有的話查看自己的域名是否在內(nèi)，一定要這兩個條件都符合！
瀏覽器才會接受（或者說響應）服務器返回的回復！

服務器需要實現(xiàn)的內(nèi)容：

服務器需要在接受到瀏覽器發(fā)來的請求（request）后，在返回response之前！
設置header，在header中里面包含特定字段，以便瀏覽器收到回復之后可以去檢查，有字段證明服務器同意服務這個網(wǎng)站，瀏覽器就可以接受回復，沒有字段或者字段的值不包含發(fā)送請求的網(wǎng)站，瀏覽器就不會響應回復內(nèi)容！

后端解決跨域問題的幾種方式

第一種：在application文件里

第二種：在配置類里加上注解

第三種：在過濾器里設置

@WebFilter(filterName = "CorsFilter ")
@Configuration
public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin","*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        
        HttpServletRequest httpRequest = (HttpServletRequest) req;
		// OPTIONS method response
		if (httpRequest.getMethod().equals("OPTIONS"))
			((HttpServletResponse) res).sendError(HttpServletResponse.SC_OK);
        
        chain.doFilter(req, res);
    }
}