SpringBoot和前端Vue的跨域問題及解決方案
一、為什么會出現(xiàn)跨域問題
出于瀏覽器的同源策略限制。同源策略(Sameoriginpolicy)是一種約定,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,則瀏覽器的正常功能可能都會受到影響??梢哉fWeb是構(gòu)建在同源策略基礎(chǔ)之上的,瀏覽器只是針對同源策略的一種實(shí)現(xiàn)。同源策略會阻止一個域的。javascript腳本和另外一個域的內(nèi)容進(jìn)行交互。所謂同源(即指在同一個域)就是兩個頁面具有相同的協(xié)議(protocol),主機(jī)(host)和端口號(port)。
二、什么是跨域?
要了解什么是跨域,我們先說一下同源的概念。同源,是指協(xié)議、域名、端口都相同。
例如:http://192.168.0.1:8080與https://192.168.3.1:8080不是同源,因?yàn)閰f(xié)議不同,第一個冒號前面的為協(xié)議,中間的為域名,第二個冒號后面的為端口,只要滿足有一處不同,則就不是同源。
所謂跨域就是從 A 向 B 發(fā)請求,如若他們的地址協(xié)議、域名、端口都不相同,直接訪問就會造成跨域問題,跨域是非常常見的現(xiàn)象!請求是跨域的但并不一定會報(bào)錯,普通的圖片請求。css文件請求是不會報(bào)錯的。報(bào)錯的條件是瀏覽器的同源策略,且發(fā)送Ajax請求,跨域是客戶端問題。
類似于如下:
三、常見的跨域場景
四、如何解決跨域?
1.JSONP
jsonp的原理就是利用<script>
標(biāo)簽沒有跨域限制,通過<script>
標(biāo)簽src屬性,發(fā)送帶有callback參數(shù)的GET請求,服務(wù)端將接口返回?cái)?shù)據(jù)拼湊到callback函數(shù)中,返回給瀏覽器,瀏覽器解析執(zhí)行,從而前端拿到callback函數(shù)返回的數(shù)據(jù)。
jsonp的缺點(diǎn):只能發(fā)送get一種請求。
2.CORS
CORS是一個W3C標(biāo)準(zhǔn),全稱是"跨域資源共享"(Cross-origin resource sharing)。
它允許瀏覽器向跨源服務(wù)器,發(fā)出XMLHttpRequest請求,從而克服了AJAX只能同源使用的限制。
CORS需要瀏覽器和服務(wù)器同時支持。目前,所有瀏覽器都支持該功能,IE瀏覽器不能低于IE10。
瀏覽器將CORS跨域請求分為簡單請求和非簡單請求。
只要同時滿足一下兩個條件,就屬于簡單請求
(1)使用下列方法之一:
- head
- get
- post
(2)請求的Heder是
- Accept
- Accept-Language
- Content-Language
- Content-Type: 只限于三個值:application/x-www-form-urlencoded、multipart/form-data、text/plain
不同時滿足上面的兩個條件,就屬于非簡單請求。瀏覽器對這兩種的處理,是不一樣的。
3.nginx反向代理接口跨域
可以將前端項(xiàng)目部署到和接口同源的當(dāng)前本地的服務(wù)器上。在vue.config.js 中進(jìn)行代理配置,假設(shè)當(dāng)我訪問 http://localhost:9528/api/login 時會轉(zhuǎn)換為間接訪問 http://localhost:3000/api/login
devServer: { // 其他代碼省略。。。。。 // 代理配置 proxy: { // 代理服務(wù)器,當(dāng)請求的網(wǎng)址是http://localhost:3000的時候,會轉(zhuǎn)成http://192.168.80.115:3000 // /api 是 看接口文檔所寫的,每當(dāng)訪問本地的/api接口時,會轉(zhuǎn)化為訪問真實(shí)的服務(wù)器 '/api': { target: 'http://localhost:3000' // 我們要代理的真實(shí)接口地址 } }
4.web sockets
它是一種瀏覽器的API,它的目標(biāo)是在一個單獨(dú)的持久連接上提供全雙工、雙向通信。(同源策略對web sockets不適用)web sockets原理:在JS創(chuàng)建了web socket之后,會有一個HTTP請求發(fā)送到瀏覽器以發(fā)起連接。取得服務(wù)器響應(yīng)后,建立的連接會使用HTTP升級從HTTP協(xié)議交換為web sockt協(xié)議。 只有在支持web socket協(xié)議的服務(wù)器上才能正常工作。
屬性:
5.node.js中間件代理跨域
node中間件實(shí)現(xiàn)跨域代理,原理大致與nginx相同,都是通過啟一個代理服務(wù)器,實(shí)現(xiàn)數(shù)據(jù)的轉(zhuǎn)發(fā),也可以通過設(shè)置cookieDomainRewrite參數(shù)修改響應(yīng)頭中cookie中域名,實(shí)現(xiàn)當(dāng)前域的cookie寫入,方便接口登錄認(rèn)證。
1)非vue框架的跨域
使用node + express + http-proxy-middleware搭建一個proxy服務(wù)器。
前端代碼:
var xhr = new XMLHttpRequest(); // 前端開關(guān):瀏覽器是否讀寫cookie xhr.withCredentials = true; // 訪問http-proxy-middleware代理服務(wù)器 xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true); xhr.send();
中間件服務(wù)器代碼:
var express = require('express'); var proxy = require('http-proxy-middleware'); var app = express(); app.use('/', proxy({ // 代理跨域目標(biāo)接口 target: 'http://www.domain2.com:8080', changeOrigin: true, // 修改響應(yīng)頭信息,實(shí)現(xiàn)跨域并允許帶cookie onProxyRes: function(proxyRes, req, res) { res.header('Access-Control-Allow-Origin', 'http://www.domain1.com'); res.header('Access-Control-Allow-Credentials', 'true'); }, // 修改響應(yīng)信息中的cookie域名 cookieDomainRewrite: 'www.domain1.com' // 可以為false,表示不修改 })); app.listen(3000); console.log('Proxy server is listen at port 3000...');
2)vue框架的跨域
node + vue + webpack + webpack-dev-server搭建的項(xiàng)目,跨域請求接口,直接修改webpack.config.js配置。開發(fā)環(huán)境下,vue渲染服務(wù)和接口代理服務(wù)都是webpack-dev-server同一個,所以頁面與代理接口之間不再跨域。
webpack.config.js部分配置:
module.exports = { entry: {}, module: {}, ... devServer: { historyApiFallback: true, proxy: [{ context: '/login', target: 'http://www.domain2.com:8080', // 代理跨域目標(biāo)接口 changeOrigin: true, secure: false, // 當(dāng)代理某些https服務(wù)報(bào)錯時用 cookieDomainRewrite: 'www.domain1.com' // 可以為false,表示不修改 }], noInfo: true } }
五、SpringBoot跨域問題的解決
在Springboot項(xiàng)目里加上這個配置文件CorsConfig.java
,重啟之后即可實(shí)現(xiàn)跨域訪問,前端無需再配置跨域。
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 { // 當(dāng)前跨域請求最大有效時長。這里默認(rèn)1天 private static final long MAX_AGE = 24 * 60 * 60; @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); // 1 設(shè)置訪問源地址 corsConfiguration.addAllowedHeader("*"); // 2 設(shè)置訪問源請求頭 corsConfiguration.addAllowedMethod("*"); // 3 設(shè)置訪問源請求方法 corsConfiguration.setMaxAge(MAX_AGE); source.registerCorsConfiguration("/**", corsConfiguration); // 4 對接口配置跨域設(shè)置 return new CorsFilter(source); } }
六、前端跨域解決
request.js用來請求數(shù)據(jù),封裝的代碼如下:
import axios from 'axios' const request = axios.create({ baseURL: '/api', // 注意?。?這里是全局統(tǒng)一加上了 '/api' 前綴,也就是說所有接口都會加上'/api'前綴在,頁面里面寫接口的時候就不要加 '/api'了,否則會出現(xiàn)2個'/api',類似 '/api/api/user'這樣的報(bào)錯,切記!?。? timeout: 5000 }) // request 攔截器 // 可以自請求發(fā)送前對請求做一些處理 // 比如統(tǒng)一加token,對請求參數(shù)統(tǒng)一加密 request.interceptors.request.use(config => { config.headers['Content-Type'] = 'application/json;charset=utf-8'; // config.headers['token'] = user.token; // 設(shè)置請求頭 return config }, error => { return Promise.reject(error) }); // response 攔截器 // 可以在接口響應(yīng)后統(tǒng)一處理結(jié)果 request.interceptors.response.use( response => { let res = response.data; // 如果是返回的文件 if (response.config.responseType === 'blob') { return res } // 兼容服務(wù)端返回的字符串?dāng)?shù)據(jù) if (typeof res === 'string') { res = res ? JSON.parse(res) : res } return res; }, error => { console.log('err' + error) // for debug return Promise.reject(error) } ) export default request
vue.config.js:
// 跨域配置 module.exports = { devServer: { //記住,別寫錯了devServer//設(shè)置本地默認(rèn)端口 選填 port: 9876, proxy: { //設(shè)置代理,必須填 '/api': { //設(shè)置攔截器 攔截器格式 斜杠+攔截器名字,名字可以自己定 target: 'http://localhost:9999', //代理的目標(biāo)地址 changeOrigin: true, //是否設(shè)置同源,輸入是的 pathRewrite: { //路徑重寫 '^/api': '' //選擇忽略攔截器里面的內(nèi)容 } } } } }
七、前后端都跨域
如果后端設(shè)置了跨域配置,則使用下面的request.js 代碼:
import axios from 'axios' const request = axios.create({ baseURL: 'http://localhost:9090', // 注意?。?這里是全局統(tǒng)一加上了 后端接口前綴 前綴,后端必須進(jìn)行跨域配置! timeout: 5000 }) // request 攔截器 // 可以自請求發(fā)送前對請求做一些處理 // 比如統(tǒng)一加token,對請求參數(shù)統(tǒng)一加密 request.interceptors.request.use(config => { config.headers['Content-Type'] = 'application/json;charset=utf-8'; // config.headers['token'] = user.token; // 設(shè)置請求頭 return config }, error => { return Promise.reject(error) }); // response 攔截器 // 可以在接口響應(yīng)后統(tǒng)一處理結(jié)果 request.interceptors.response.use( response => { let res = response.data; // 如果是返回的文件 if (response.config.responseType === 'blob') { return res } // 兼容服務(wù)端返回的字符串?dāng)?shù)據(jù) if (typeof res === 'string') { res = res ? JSON.parse(res) : res } return res; }, error => { console.log('err' + error) // for debug return Promise.reject(error) } ) export default request
?小結(jié)
以上就是對解決SpringBoot和前端Vue的跨域問題簡單的概述,現(xiàn)在我們的項(xiàng)目就更加的趨于完美了,也提升了我們對于編程的能力和思維!
到此這篇關(guān)于解決SpringBoot和前端Vue的跨域問題的文章就介紹到這了,更多相關(guān)springboot vue跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Java數(shù)據(jù)結(jié)構(gòu)之平衡二叉樹的實(shí)現(xiàn)詳解
平衡二叉樹又被稱為AVL樹(有別于AVL算法),且具有以下性質(zhì):它是一棵空樹或它的左右兩個子樹的高度差的絕對值不超過1,并且左右兩個子樹都是一棵平衡二叉樹。本文將詳解介紹一下平衡二叉樹的原理與實(shí)現(xiàn),需要的可以參考一下2022-03-03Java實(shí)現(xiàn)本地緩存的四種方案(Guava Cache、Caffeine、Ehcach 和Sprin
在現(xiàn)代應(yīng)用程序開發(fā)中,緩存是提高性能和響應(yīng)速度的關(guān)鍵技術(shù)之一,Java 提供了多種本地緩存解決方案,每種方案都有其特點(diǎn)和適用場景,本文將介紹四種常見的 Java 本地緩存實(shí)現(xiàn),需要的朋友可以參考下2024-12-12Java中使用fileupload組件實(shí)現(xiàn)文件上傳功能的實(shí)例代碼
這篇文章主要介紹了Java中使用fileupload組件實(shí)現(xiàn)文件上傳功能的實(shí)例代碼,需要的朋友可以參考下2017-05-05Java Swing中的JButton、JComboBox、JList和JColorChooser組件使用案例
這篇文章主要介紹了Java Swing中的按鈕(JButton)、組合框(JComboBox)、下拉列表(JList)和顏色選擇器(JColorChooser)組件使用案例,需要的朋友可以參考下2014-10-10關(guān)于SpingMVC的<context:component-scan>包掃描踩坑記錄
這篇文章主要介紹了關(guān)于SpingMVC的<context:component-scan>包掃描踩坑記錄,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03Java并發(fā)程序刺客之假共享的原理及復(fù)現(xiàn)
前段時間在各種社交平臺“雪糕刺客”這個詞比較火,而在并發(fā)程序中也有一個刺客,那就是假共享。本文將通過示例詳細(xì)講解假共享的原理及復(fù)現(xiàn),需要的可以參考一下2022-08-08