一、url

   url（uniform resource locator:統(tǒng)一資源定位符）

   協(xié)議://域名:端口號/資源路徑/文件名

二、同源的含義

所謂同源，就是指請求的資源url和目前文件來源url的協(xié)議、域名和端口都相同。同源即同域，兩者意思相同。

舉例：網(wǎng)址：http://www.oneRound.com/dir/page.html ，它的協(xié)議是http://，域名是www.oneRound.com ，端口是80（http協(xié)議在沒有指定端口號時，默認(rèn)端口號是80）。

將表格中的url與 http://www.oneRound.com/dir/page.html 比較判斷是否同源

三、瀏覽器的同源策略

瀏覽器的同源策略是指：js腳本在未經(jīng)允許的情況下，不能夠訪問其他域下的內(nèi)容，以保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)。

同源策略主要限制：

1、一個域下的js腳本不能訪問另一個域下面的cookie,localStorage和indexDB

2、一個域下的js腳本不能夠操作另一個域下的DOM

3、ajax不能做跨域請求

1、限制cookie 等信息的跨源網(wǎng)頁讀取，為了防止惡意網(wǎng)站通過js獲取用戶其他網(wǎng)站的cookie，是為了保護本地用戶信息

2、限制dom的操作，因為惡意網(wǎng)站可以通過iframe打開系統(tǒng)界面，如果可以獲取DOM就相當(dāng)于可以獲取整個系統(tǒng)界面的信息。

3、限制跨域 ajax 請求，是為了保護被跨域請求的服務(wù)器中數(shù)據(jù)庫用戶信息，更加準(zhǔn)確地說是跨域請求能發(fā)出去，服務(wù)器端能收到請求并正常返回結(jié)果，但是結(jié)果被瀏覽器攔截了

 特殊：script標(biāo)簽，img標(biāo)簽，以及l(fā)ink標(biāo)簽可以鏈接其他域中的資源， 因為這些標(biāo)簽不能通過相應(yīng)的結(jié)果來進行安全問題的操作。

四、跨域訪問  

1、什么是跨域訪問

從 A 向 B 發(fā)請求，如果他們的url非同源，直接訪問就會造成跨域問題?？缬蚴强蛻舳藛栴}，跨域請求有兩種情況：

 ①普通的圖片、css文件請求，不報錯               

②發(fā)送Ajax請求，報錯

發(fā)起跨域請求 --> 瀏覽器在請求的header上添加origin字段 --> 請求成功發(fā)送到服務(wù)器 --> 服務(wù)器將數(shù)據(jù)返回給瀏覽器 --> 服務(wù)器返回的響應(yīng)頭中，沒有告訴瀏覽器哪個域名可以訪問這些數(shù)據(jù)（沒有設(shè)置 Access-Control-Allow-Origin）--> 瀏覽器將丟棄數(shù)據(jù)，拋出錯誤

2、為什么前后端分離項目會產(chǎn)生跨域問題

前后端分離的應(yīng)用，前端、后端是2個獨立的應(yīng)用，運行在不同端口。在瀏覽器看來，是不同的域，由于瀏覽器同源策略的限制，導(dǎo)致不同源之間的通信。前端頁面中的ajax請求后端接口，即跨域訪問。

3、跨域過程分析

瀏覽器對前端頁面和后臺交互url判斷，若同源，則直接發(fā)送數(shù)據(jù)請求；若不同源，則發(fā)送跨域請求 ---->

判斷跨域請求。非簡單請求：瀏覽器會幫我們自動觸發(fā)預(yù)檢請求，用于確認(rèn)請求內(nèi)容是否符合服務(wù)端的要求，如果符合，在進行正式的請求。簡單請求：直接發(fā)出正常請求。---->

服務(wù)器收到瀏覽器跨域請求后，根據(jù)自身配置返回對應(yīng)文件頭。若未配置允許跨域，即文件頭里不包含 Access-Control-Allow-origin 字段，若配置過域名，則返回 Access-Control-Allow-origin + 對應(yīng)配置規(guī)則里的域名的方式。 ---->

瀏覽器根據(jù)接收到的響應(yīng)頭里的 Access-Control-Allow-origin 字段判斷，若無該字段，說明不允許跨域，拋出一個錯誤；若有該字段，對字段內(nèi)容和當(dāng)前域名做比對，如果同源，即允許跨域，瀏覽器接受該響應(yīng)；若不同源，即該域名不可跨域，瀏覽器不接受該響應(yīng)，并拋出一個錯誤。

cros跨域請求之簡單請求、復(fù)雜請求

簡單請求：

 簡單請求的內(nèi)容：

  請求方法：get、post、head

  HTTP的頭信息不超出以下幾種：Accept 、Accept-Language、Content-Language、

                                                            Content-Type

  Content-Type的值只有以下三種：text/plain、multipart/form-data、application

  請求中的任意XMLHttpRequestUpload 對象均沒有注冊任何事件，XMLHttpRequestUpload對象可以使用 XMLHttpRequest.upload 屬性訪問

  請求中沒有使用 ReadableStream 對象

簡單請求的部分響應(yīng)頭如下：

1.Access-Control-Allow-Origin（必含）- 不可省略，否則請求按失敗處理。該項控制數(shù)據(jù)的可見范圍，如果希望數(shù)據(jù)對任何人都可見，可以填寫"*"。

2.Access-Control-Allow-Credentials（可選） – 該項標(biāo)志著請求當(dāng)中是否包含cookies信息。與請求時的withCredentials屬性保持一致。

3.Access-Control-Expose-Headers（可選） – 該項確定XmlHttpRequest2對象當(dāng)中g(shù)etResponseHeader()方法所能獲得的額外信息。通常情況下，getResponseHeader()方法只能獲得如下的信息： Cache-Control 、Content-Language、 Content-Type、Expires、 Last-Modified 、Pragma 當(dāng)你需要訪問額外的信息時，就需要在這一項當(dāng)中填寫并以逗號進行分隔。

復(fù)雜請求：

 復(fù)雜請求的內(nèi)容：

    先發(fā)送一次“預(yù)請求”，瀏覽器會詢問服務(wù)器，當(dāng)前所在的網(wǎng)頁是否在服務(wù)器允許訪問的范圍內(nèi)，以及可以使用哪些HTTP請求方式和頭信息字段，只有得到肯定的回復(fù)，才會進行正式的HTTP請求。預(yù)請求以O(shè)PTIONS形式發(fā)送，當(dāng)中同樣包含Origin，并且還包含了兩項CORS特有的內(nèi)容：

    Access-Control-Request-Method – 該項內(nèi)容是實際請求的種類，可以是GET、POST之類的簡單請求，也可以是PUT、DELETE等等。

    Access-Control-Request-Headers – 該項是一個以逗號分隔的列表，當(dāng)中是復(fù)雜請求所使用的頭部。

復(fù)雜請求的預(yù)請求的響應(yīng)頭如下：

1.Access-Control-Allow-Origin（必含） – 和簡單請求一樣的，必須包含一個域。

2.Access-Control-Allow-Headers -- 可以返回所有支持的頭部。

3.Access-Control-Allow-Credentials（可選） – 和簡單請求當(dāng)中作用相同

4.Access-Control-Allow-Methods（必含） – 這是對預(yù)請求當(dāng)中Access-Control-Request-Method的回復(fù)，這一回復(fù)將是一個以逗號分隔的列表。盡管客戶端或許只請求某一方法，但服務(wù)端仍然可以返回所有允許的方法，以便客戶端將其緩存。

5.Access-Control-Max-Age（可選） – 以秒為單位的緩存時間。Access-Control-Max-Age這個響應(yīng)首部表示 preflight request （預(yù)檢請求）的返回結(jié)果（即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息） 能夠被緩存的最長時間，單位是秒。

本塊內(nèi)容原文鏈接：https://blog.csdn.net/qq_36582776/article/details/123670373

五、cros解決跨域訪問

注：跨源請求的本質(zhì)是請求別人的信息，所以能否跨域請求，是由被請求的服務(wù)器的設(shè)置決定的。 

w3c提出跨域資源共享，CORS機制 。CORS 是 Cross-Origin-Resource-Sharing  的縮寫，是一種安全機制，當(dāng)瀏覽器檢測到發(fā)送的請求非同源（即跨域）時，會自動在 http 頭部添加一個 origin 字段，解決跨域問題的關(guān)鍵就是在服務(wù)端的響應(yīng)頭中設(shè)置Access-Control-Allow-Origin，即可完成跨域數(shù)據(jù)獲取。

在后臺實現(xiàn)跨域的設(shè)置，前臺就可以訪問了

當(dāng)瀏覽器發(fā)送一個跨域請求時會在 http 頭部自動加上 Origin需要服務(wù)端配合設(shè)置響應(yīng)頭 Access-Control-Allow-Origin:*|Origin 才可完成跨域

六、springboot web項目使用Cros解決跨域

前端的url：http://localhost:8082

后端的url：http://localhost:8086

1、配置全局跨域訪問

 在項目路徑下創(chuàng)建config文件夾，在config文件夾下創(chuàng)建CrosConfig類實現(xiàn)WebConfigConfigurer

@Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") //**匹配的是我們所有后臺的路徑，代表后臺共享了什么資源
                .allowedOrigins("http://localhost:8082") //匹配的前臺的服務(wù)器地址
                .maxAge(300 * 1000)
                .allowedHeaders("*")
                .allowedMethods("*"); //允許的前臺的請求方式
 
    }
}

使用示例：

成功！ 

2、@CrossOrigin注解

作用：

在controller上添加@CrossOrigin注解用來開啟跨域請求，讓其他域的請求可以訪問該controller，否則所有其他域的訪問會全部被拒絕。

詳解：

origin屬性：允許可訪問的域列表

maxAge：準(zhǔn)備響應(yīng)前的緩存持續(xù)的最大時間（以秒為單位）

使用位置：

①類

 ②方法

①@CrossOrigin注解用在類上

整個類的方法都可以被允許的域訪問

后端controller

@Controller
@CrossOrigin("http://localhost:8082")
//@RequestMapping("/emp")
public class EmpController {
    @Autowired
    private IEmpService empService;
 
 
    @RequestMapping("/getConformEmp")
    @ResponseBody
    public String getConformEmp(@RequestBody Map<String,String> map) {
        System.out.println(map);
        String name = map.get("name");
        String age = map.get("age");
        return  name + "今年" + age + "歲了！";
    }
}

 前端（以Vue為例）

methods:{
    getInfo(){
      this.$http.post("/getConformEmp",{"name":"小明","age":"19"}).then(res => {
        this.pInfo = res.data
      })
    }
  }

成功！

 ②注解用在方法上

有注解的方法可以被指定的域訪問

 跨域訪問“/getConformEmp”：成功！

跨域訪問“/getConformEmp01”：失敗！

總結(jié)

到此這篇關(guān)于springboot跨域訪問cros與@CrossOrigin注解的文章就介紹到這了,更多相關(guān)springboot跨域訪問內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論