快捷導(dǎo)航

解讀前后端分離項(xiàng)目的跨域問(wèn)題

更新時(shí)間：2024年11月28日 16:48:48 作者：又菜又愛(ài)玩的晴晴

文章介紹了跨域問(wèn)題的原因——瀏覽器的同源策略限制,以及CORS（跨域資源共享）的概念,CORS通過(guò)服務(wù)器設(shè)置特定的響應(yīng)頭來(lái)允許跨域請(qǐng)求,文章還概述了后端解決跨域問(wèn)題的幾種方式,并簡(jiǎn)要介紹了前端處理跨域請(qǐng)求的方法

跨域問(wèn)題的原因

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

同源策略

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

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

請(qǐng)求地址	結(jié)果	原因
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	失敗	不同端口，默認(rèn)為8080端口
http://www.sina.com:8081/a/java.html	失敗	不同域名

跨域CORS

跨域就是解決不同域之間可以進(jìn)行資源的相互訪問(wèn)，為了避開(kāi)瀏覽器的同源政策

CORS出現(xiàn)之前

瀏覽器接收到服務(wù)器回復(fù)—>檢查是否同源—>同源就響應(yīng)，不同源就拒絕相應(yīng)

CORS出現(xiàn)之后

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

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

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

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

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

后端解決跨域問(wèn)題的幾種方式

第一種：在application文件里

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

第三種：在過(guò)濾器里設(shè)置

@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);
    }
}