什么是跨越問題
跨域問題源于瀏覽器的同源策略限制。
同源策略主要是限制cookie的訪問，在非同源的情況下，A網(wǎng)頁不能夠訪問B網(wǎng)頁， “同源” 即是 協(xié)議 + 域名 + 端口
同源的設(shè)計是為了防止CSRF（跨站請求偽造），舉一個例子來說就是A網(wǎng)站是釣魚網(wǎng)站，當(dāng)?shù)卿涖y行網(wǎng)址存錢賺錢后，保留了一個cookie識別當(dāng)前用戶，如果能夠跨域訪問，A網(wǎng)站就能夠訪問銀行網(wǎng)站的cookie，此時釣魚網(wǎng)站就能夠使用銀行Cookie來登錄轉(zhuǎn)錢了，所以同源策略是必須的。
隨著互聯(lián)網(wǎng)的發(fā)展，同源策略越來越嚴(yán)格，不僅限于Cookie的讀取。
（1）Cookie、LocalStorage 和 IndexDB 無法讀取
（2）DOM 無法獲取
（3）請求的響應(yīng)被攔截
由于這些限制的存在，就出現(xiàn)了跨域問題，下面介紹發(fā)生的情況
如何發(fā)生的跨越問題
在后端沒有做跨域處理的情況下，前端部署在 http://127.0.0.1:5500，后端部署在8818，很明顯不符合上述講到的同源情況，端口不相同，所以會觸發(fā)跨域問題，下面模擬情況的發(fā)生
前端發(fā)起請求
請求成功，后端也有響應(yīng)返回，但是前端看不到響應(yīng)結(jié)果
跨域問題解決
這里我在后端進(jìn)行跨域處理，也就是讓后端的接口能夠被任意請求訪問，繼承WebMvcConfigurer，這里相當(dāng)于是讓 SpringBoot 幫你把事情做了，如果要手動的話，后面介紹一下。
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
//跨域配置
registry.addMapping("/**")
//設(shè)置允許跨域請求的域名
.allowedOriginPatterns("*")
//設(shè)置允許跨域的方法
.allowedMethods("GET","POST","PUT","DELETE")
.allowedHeaders("*")
//是否允許證書
.allowCredentials(true)
//跨域允許時間
.maxAge(3600);
}
}
這段代碼的意義就是給HTTP請求的頭部加上允許跨域的頭部字段，使得HTTP請求正常返回結(jié)果
上面的方法成功解決了跨域問題，但是還有其他的辦法么，肯定是有很多方法的，分為前端解決，后端解決，或者使用外部的，比如 nginx反向代理解決，這里我主要介紹Java不使用SpringBoot那套的情況下如何解決。
首先要明確目的，解決跨域問題的方法就是在HTTP請求頭上加上相應(yīng)的參數(shù)，因此也就是修改HTTP請求頭，考慮采用過濾器攔截接口，獲取到接口的請求頭，加上響應(yīng)的參數(shù)，所以我們這里使用Filter來解決。
@Configuration
public class WebMvcConfig 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-Methods", "*");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
chain.doFilter(req, res);
}
}
再次訪問剛剛的接口，正常訪問
所以說，跨域問題歸根到底就是不允許訪問，加上允許訪問后的參數(shù)就是解決跨域問題的思路文章來源：http://www.zghlxwxcb.cn/news/detail-495981.html
資料來源
10種跨域問題解決
跨域問題是如何產(chǎn)生的
SpringBoot解決跨域問題文章來源地址http://www.zghlxwxcb.cn/news/detail-495981.html
到了這里，關(guān)于跨域的原因和解決的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
