一、url

   url（uniform resource locator:統一資源定位符）

   協議://域名:端口號/資源路徑/文件名

二、同源的含義

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

舉例：網址：http://www.oneRound.com/dir/page.html ，它的協議是http://，域名是www.oneRound.com ，端口是80（http協議在沒有指定端口號時，默認端口號是80）。

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

三、瀏覽器的同源策略

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

同源策略主要限制：

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

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

3、ajax不能做跨域請求

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

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

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

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

四、跨域訪問  

1、什么是跨域訪問

從 A 向 B 發(fā)請求，如果他們的url非同源，直接訪問就會造成跨域問題。跨域是客戶端問題，跨域請求有兩種情況：

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

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

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

2、為什么前后端分離項目會產生跨域問題

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

3、跨域過程分析

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

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

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

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

cros跨域請求之簡單請求、復雜請求

簡單請求：

 簡單請求的內容：

  請求方法：get、post、head

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

                                                            Content-Type

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

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

  請求中沒有使用 ReadableStream 對象

簡單請求的部分響應頭如下：

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

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

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

復雜請求：

 復雜請求的內容：

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

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

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

復雜請求的預請求的響應頭如下：

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

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

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

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

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

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

五、cros解決跨域訪問

注：跨源請求的本質是請求別人的信息，所以能否跨域請求，是由被請求的服務器的設置決定的。 

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

在后臺實現跨域的設置，前臺就可以訪問了

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

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

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

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

1、配置全局跨域訪問

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

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

使用示例：

成功！ 

2、@CrossOrigin注解

作用：

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

詳解：

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

maxAge：準備響應前的緩存持續(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”：失?。?/p>

總結

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

最新評論