Spring Boot對Ajax跨域訪問的支援實現

2021-08-02 10:55:38 字數 1759 閱讀 8841

作者在se305課程中,需要設計一款新時代網際網路購票系統,團隊使用vue.js前端,spring mvc的後台架構。開發過程中遇到跨域訪問的問題,故寫成此部落格進行**解決方案。主要涉及的話題有:

究竟什麼是跨域訪問?作者引用了mdn對cors的定義

當乙個資源從與該資源本身所在的伺服器的域或埠不同的域或不同的埠請求乙個資源時,資源會發起乙個跨域 http 請求。

比如,站點 的某 html 頁面通過 的 src 請求

網路上的許多頁面都會載入來自不同域的css樣式表,影象和指令碼等資源。

出於安全考慮,瀏覽器會限制從指令碼內發起的跨域http請求。例如,xmlhttprequest 和 fetch 遵循同源策略。因此,使用

xmlhttprequest或 fetch

的web應用程式只能將http請求傳送到其自己的域。為了改進web應用程式,開發人員要求瀏覽器廠商允許跨域請求。

下面是簡單的流程圖:

客戶端和伺服器之間使用 cors 首部欄位來處理跨域許可權:

也就是說在http request以及response加入cors對應的首部行欄位即可解決。下面講解在spring下的後台解決方案

在controller類或其方法上加@crossorigin註解

@crossorigin(origins = "*", maxage = 3600)

@restcontroller

public

class

cinemacontroller

在web.xml中配置乙個corsfilter

corsfilterfilter-name>

/*url-pattern>

而filter的實現如下

@component

public

class

initcorsfilter

extends

onceperrequestfilter

//表示伺服器端允許任意domain訪問請求

本次專案使用spring-boot,可以把corsfilter作為@bean加入到@configuration中即可配置,方便簡潔。

@configuration

public

class

corsconfig

@bean

public corsfilter corsfilter()

}//通過任意請求

解決的不二思路就是當捕獲到cors請求(使用filter實現)時,返回包含特定header的response。

對ajax的了解

1.什麼是ajax?2.傳統的開發模式與ajax的開發模式的不同之處3.ajax.js檔案的編寫步驟 1.建立ajax物件 2 連線伺服器 2.連線伺服器 open 方法,檔名,非同步傳輸 oajax.open get a.txt true 3 傳送請求 3.傳送請求 oajax.send 4 接受...

基於springboot的ajax非同步檔案上傳

ajax提交 這裡用到了formdata,因為直接提交表單的話會導致頁面的跳轉,所以使用formdata模擬乙個表單提交所需要的資料,將其放入ajax的data裡即可。function submit springboot後台接收 接收檔案我們這裡使用的是multipartfile這個類,通過搭配註解...

在spring boot上進行ajax上傳檔案

由於我想試一下不使用表單來上傳檔案與檔名,在這裡使用div巢狀input來使用 提交按鈕 enctype multipart form data 如果這一行不加上去後台會報錯誤 current request is not a multipart request function addfile e...