目前很多java web開發(fā)都是采用前后端分離框架進(jìn)行開發(fā)，相比于單體項(xiàng)目容易產(chǎn)生跨域問題。

一、跨域問題CORS

1.什么是跨域問題？

后端接收到請(qǐng)求并返回結(jié)果了，瀏覽器把這個(gè)響應(yīng)攔截了。

2.跨域問題是怎么產(chǎn)生的？

瀏覽器基于同源策略，如果請(qǐng)求的網(wǎng)頁和當(dāng)前的服務(wù)不是同源的，并且發(fā)送的是XHR（XMLHttpRequest）請(qǐng)求，就會(huì)產(chǎn)生跨域問題。

同源策略：url中的協(xié)議、域名、端口號(hào)任意一個(gè)不同就不同源。注意兩個(gè)不同的域名指向同一個(gè)主機(jī)ip也叫不同源。

3.為什么要有同源策略？

CSRF攻擊：借助本地瀏覽器緩存的cookie信息，以當(dāng)前登陸者的身份模擬發(fā)送請(qǐng)求，完成攻擊者期待的操作。當(dāng)攻擊者拿到管理員的信息時(shí)可能對(duì)整個(gè)web程序造成重大打擊。

csrf防御：

• 規(guī)范使用各個(gè)請(qǐng)求方法，比如get請(qǐng)求只能檢索信息，不能修改信息。
• 當(dāng)用戶訪問站點(diǎn)時(shí)生成一個(gè)隨機(jī)數(shù)，并設(shè)置成用戶發(fā)送請(qǐng)求時(shí)的cookie。用戶提交表單時(shí)，要攜帶隨機(jī)數(shù)。當(dāng)csrf攻擊者發(fā)送請(qǐng)求時(shí)，由于沒有這個(gè)隨機(jī)數(shù)，所以請(qǐng)求失敗。
• 在非get請(qǐng)求中增加token并使用攔截器校驗(yàn)。
• HTTP頭中有一個(gè)Referer字段，這個(gè)字段用以標(biāo)明請(qǐng)求來源于哪個(gè)地址，在訪問敏感數(shù)據(jù)時(shí)，先檢查referer字段，查看請(qǐng)求來源于哪個(gè)地址。如果是本頁面的url就可以訪問，如果是別的網(wǎng)頁的url就禁止訪問。
• 自定義屬性加到請(qǐng)求頭。通過 XMLHttpRequest 這個(gè)類，一次性給所有該類請(qǐng)求加上 csrftoken 這個(gè) HTTP 頭屬性。
• 客戶端中RequestRodeo 工具通過在客戶和服務(wù)器之間充當(dāng)代理來防止CSRF攻擊
• 客戶端下載某些插件，對(duì)于攔截的請(qǐng)求用戶可以自己設(shè)置白名單。

二、解決方法

前端解決方式

1.JSONP方案：（只能解決get請(qǐng)求不能解決post請(qǐng)求）

不受同源策略影響的標(biāo)簽：img、script、link 、iframe

通過在前端動(dòng)態(tài)創(chuàng)建script標(biāo)簽，指定跨域資源的URL，服務(wù)器返回的是一段JavaScript代碼，前端通過回調(diào)函數(shù)處理數(shù)據(jù)。

2.vue解決devServer配置

module.exports = {
    devServer: {
        proxy: {
            '/api': { // 請(qǐng)求的代稱，寫在Axios里的BaseUrl
                target: 'http://localhost:8088/spring', // 真實(shí)請(qǐng)求URl
                ws: true,
                changeOrigin: true, // 允許跨域
                pathRewrite: { //替換，通配/api的替換成對(duì)應(yīng)字符
                //     /* 重寫路徑，當(dāng)我們?cè)跒g覽器中看到請(qǐng)求的地址為：http://localhost:8080/api/core/getData/userInfo 時(shí)
                //       實(shí)際上訪問的地址是：http://localhost:8088/spring/core/getData/userInfo,因?yàn)橹貙懥?/api
                //      */
                    '^/api': '' //當(dāng)你的接口中沒有/api字眼時(shí)，采用這種，直接替換成空即可
                //     '^/api': '/api'   //當(dāng)你的接口中剛好有/api 時(shí)，采用這種方式
                }
            }
        }
    }
}

3.Nginx代理

正向代理：順著請(qǐng)求方向代理，由用戶配置，為用戶代理服務(wù)。拿到要訪問的資源。

反向代理：充當(dāng)響應(yīng)服務(wù)器，對(duì)目標(biāo)服務(wù)器提供了請(qǐng)求轉(zhuǎn)發(fā)的功能。

nginx使用的是反向代理：瀏覽器訪問A服務(wù)器，A服務(wù)器再將請(qǐng)求發(fā)送到B瀏覽器，拿到內(nèi)容返回給瀏覽器。

下載negix，完成配置

服務(wù)器監(jiān)聽80端口，請(qǐng)求帶著“/api”就代理到指定的服務(wù)器，也可以配置重寫url。

上面的場(chǎng)景：前端發(fā)送一個(gè)api/xxx請(qǐng)求，negix代理對(duì)請(qǐng)求做處理。將這個(gè)請(qǐng)求代理到后端服務(wù)器，并重寫了請(qǐng)求的url。

ssm項(xiàng)目后端表現(xiàn)層解決方案

1.在響應(yīng)頭中添加屬性

在controller代碼中寫下面這行代碼。

response.addHeader("Access-Control-Allow-Origin","http://127.0.0.1:8081");

springboot項(xiàng)目中，跨域問題后端怎么解決？

CORS：跨域同源共享。在響應(yīng)頭中設(shè)置一些配置。access-control-allow-origin屬性設(shè)置

1.在目標(biāo)方法上添加@CrossOrigin注解

2.添加cors的過濾器統(tǒng)一解決，不用每個(gè)方法都加注解

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter(){
        CorsConfiguration corsConfiguration=new CorsConfiguration();
        //允許那些域訪問
        corsConfiguration.addAllowedOrigin("*");
        //允許請(qǐng)求頭字段
        corsConfiguration.addAllowedHeader("*");
        //允許請(qǐng)求的方法
        corsConfiguration.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();
        //添加映射路徑
        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsFilter(source);
    }
}

3.實(shí)現(xiàn)WebMvcConfigurer接口，重寫addCorsMappings方法

   @Override
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowCredentials(true)  //是否允許攜帶cookie
                .maxAge(3600) //有效時(shí)間
                .allowedHeaders("*");
    }

4.使用代理工具。

到此這篇關(guān)于前端和后端解決跨域問題的文章就介紹到這了,更多相關(guān)前端和后端解決跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論