一、為什么會(huì)出現(xiàn)跨域問(wèn)題??
????????出于瀏覽器的同源策略限制。同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會(huì)受到影響。可以說(shuō)Web是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對(duì)同源策略的一種實(shí)現(xiàn)。同源策略會(huì)阻止一個(gè)域的。javascript腳本和另外一個(gè)域的內(nèi)容進(jìn)行交互。所謂同源（即指在同一個(gè)域）就是兩個(gè)頁(yè)面具有相同的協(xié)議(protocol)，主機(jī)(host)和端口號(hào)(port)。
二、什么是跨域？
????????要了解什么是跨域，我們先說(shuō)一下同源的概念。同源，是指協(xié)議、域名、端口都相同。
? ? ? ? 例如：http://192.168.0.1:8080與https://192.168.3.1:8080不是同源，因?yàn)閰f(xié)議不同，第一個(gè)冒號(hào)前面的為協(xié)議，中間的為域名，第二個(gè)冒號(hào)后面的為端口，只要滿(mǎn)足有一處不同，則就不是同源。
? ? ? ? 所謂跨域就是從 A 向 B 發(fā)請(qǐng)求，如若他們的地址協(xié)議、域名、端口都不相同，直接訪問(wèn)就會(huì)造成跨域問(wèn)題，跨域是非常常見(jiàn)的現(xiàn)象！請(qǐng)求是跨域的但并不一定會(huì)報(bào)錯(cuò)，普通的圖片請(qǐng)求。css文件請(qǐng)求是不會(huì)報(bào)錯(cuò)的。報(bào)錯(cuò)的條件是瀏覽器的同源策略，且發(fā)送Ajax請(qǐng)求，跨域是客戶(hù)端問(wèn)題。
類(lèi)似于如下：
三、常見(jiàn)的跨域場(chǎng)景?
四、如何解決跨域？
1.JSONP
? ? ? ?jsonp的原理就是利用<script>標(biāo)簽沒(méi)有跨域限制，通過(guò)<script>標(biāo)簽src屬性，發(fā)送帶有callback參數(shù)的GET請(qǐng)求，服務(wù)端將接口返回?cái)?shù)據(jù)拼湊到callback函數(shù)中，返回給瀏覽器，瀏覽器解析執(zhí)行，從而前端拿到callback函數(shù)返回的數(shù)據(jù)。
jsonp的缺點(diǎn)：只能發(fā)送get一種請(qǐng)求。
2.CORS
????????CORS是一個(gè)W3C標(biāo)準(zhǔn)，全稱(chēng)是"跨域資源共享"（Cross-origin resource sharing）。
它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請(qǐng)求，從而克服了AJAX只能同源使用的限制。
CORS需要瀏覽器和服務(wù)器同時(shí)支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。
??瀏覽器將CORS跨域請(qǐng)求分為簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求。
??只要同時(shí)滿(mǎn)足一下兩個(gè)條件，就屬于簡(jiǎn)單請(qǐng)求
(1)使用下列方法之一：
- head
- get
- post
(2)請(qǐng)求的Heder是
- Accept
- Accept-Language
- Content-Language
- Content-Type: 只限于三個(gè)值：application/x-www-form-urlencoded、multipart/form-data、text/plain
不同時(shí)滿(mǎn)足上面的兩個(gè)條件，就屬于非簡(jiǎn)單請(qǐng)求。瀏覽器對(duì)這兩種的處理，是不一樣的。
3.nginx反向代理接口跨域
? ? ? ? 可以將前端項(xiàng)目部署到和接口同源的當(dāng)前本地的服務(wù)器上。在vue.config.js 中進(jìn)行代理配置，假設(shè)當(dāng)我訪問(wèn) http://localhost:9528/api/login 時(shí)會(huì)轉(zhuǎn)換為間接訪問(wèn) http://localhost:3000/api/login
devServer: {
// 其他代碼省略。。。。。
// 代理配置
proxy: {
// 代理服務(wù)器，當(dāng)請(qǐng)求的網(wǎng)址是http://localhost:3000的時(shí)候，會(huì)轉(zhuǎn)成http://192.168.80.115:3000
// /api 是 看接口文檔所寫(xiě)的，每當(dāng)訪問(wèn)本地的/api接口時(shí)，會(huì)轉(zhuǎn)化為訪問(wèn)真實(shí)的服務(wù)器
'/api': {
target: 'http://localhost:3000' // 我們要代理的真實(shí)接口地址
}
}?4.web sockets
????????它是一種瀏覽器的API，它的目標(biāo)是在一個(gè)單獨(dú)的持久連接上提供全雙工、雙向通信。(同源策略對(duì)web sockets不適用)web sockets原理：在JS創(chuàng)建了web socket之后，會(huì)有一個(gè)HTTP請(qǐng)求發(fā)送到瀏覽器以發(fā)起連接。取得服務(wù)器響應(yīng)后，建立的連接會(huì)使用HTTP升級(jí)從HTTP協(xié)議交換為web sockt協(xié)議。 只有在支持web socket協(xié)議的服務(wù)器上才能正常工作。? ? ? ?
屬性：
5.node.js中間件代理跨域
??node中間件實(shí)現(xiàn)跨域代理，原理大致與nginx相同，都是通過(guò)啟一個(gè)代理服務(wù)器，實(shí)現(xiàn)數(shù)據(jù)的轉(zhuǎn)發(fā)，也可以通過(guò)設(shè)置cookieDomainRewrite參數(shù)修改響應(yīng)頭中cookie中域名，實(shí)現(xiàn)當(dāng)前域的cookie寫(xiě)入，方便接口登錄認(rèn)證。
1）非vue框架的跨域
??使用node + express + http-proxy-middleware搭建一個(gè)proxy服務(wù)器。
- 前端代碼：
var xhr = new XMLHttpRequest(); // 前端開(kāi)關(guān)：瀏覽器是否讀寫(xiě)cookie xhr.withCredentials = true; // 訪問(wèn)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)目，跨域請(qǐng)求接口，直接修改webpack.config.js配置。開(kāi)發(fā)環(huán)境下，vue渲染服務(wù)和接口代理服務(wù)都是webpack-dev-server同一個(gè)，所以頁(yè)面與代理接口之間不再跨域。
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)錯(cuò)時(shí)用
cookieDomainRewrite: 'www.domain1.com' // 可以為false，表示不修改
}],
noInfo: true
}
}五、SpringBoot跨域問(wèn)題的解決
在Springboot項(xiàng)目里加上這個(gè)配置文件CorsConfig.java，重啟之后即可實(shí)現(xiàn)跨域訪問(wèn)，前端無(wú)需再配置跨域。
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)前跨域請(qǐng)求最大有效時(shí)長(zhǎ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è)置訪問(wèn)源地址
corsConfiguration.addAllowedHeader("*"); // 2 設(shè)置訪問(wèn)源請(qǐng)求頭
corsConfiguration.addAllowedMethod("*"); // 3 設(shè)置訪問(wèn)源請(qǐng)求方法
corsConfiguration.setMaxAge(MAX_AGE);
source.registerCorsConfiguration("/**", corsConfiguration); // 4 對(duì)接口配置跨域設(shè)置
return new CorsFilter(source);
}
}
?六、前端跨域解決
request.js用來(lái)請(qǐng)求數(shù)據(jù)，封裝的代碼如下：
import axios from 'axios'
const request = axios.create({
baseURL: '/api', // 注意??！ 這里是全局統(tǒng)一加上了 '/api' 前綴，也就是說(shuō)所有接口都會(huì)加上'/api'前綴在，頁(yè)面里面寫(xiě)接口的時(shí)候就不要加 '/api'了，否則會(huì)出現(xiàn)2個(gè)'/api'，類(lèi)似 '/api/api/user'這樣的報(bào)錯(cuò)，切記?。?！
timeout: 5000
})
// request 攔截器
// 可以自請(qǐng)求發(fā)送前對(duì)請(qǐng)求做一些處理
// 比如統(tǒng)一加token，對(duì)請(qǐng)求參數(shù)統(tǒng)一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
// config.headers['token'] = user.token; // 設(shè)置請(qǐng)求頭
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: { //記住，別寫(xiě)錯(cuò)了devServer//設(shè)置本地默認(rèn)端口 選填
port: 9876,
proxy: { //設(shè)置代理，必須填
'/api': { //設(shè)置攔截器 攔截器格式 斜杠+攔截器名字，名字可以自己定
target: 'http://localhost:9999', //代理的目標(biāo)地址
changeOrigin: true, //是否設(shè)置同源，輸入是的
pathRewrite: { //路徑重寫(xiě)
'^/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 攔截器
// 可以自請(qǐng)求發(fā)送前對(duì)請(qǐng)求做一些處理
// 比如統(tǒng)一加token，對(duì)請(qǐng)求參數(shù)統(tǒng)一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
// config.headers['token'] = user.token; // 設(shè)置請(qǐng)求頭
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é)
以上就是對(duì)解決SpringBoot和前端Vue的跨域問(wèn)題簡(jiǎn)單的概述，現(xiàn)在我們的項(xiàng)目就更加的趨于完美了，也提升了我們對(duì)于編程的能力和思維！文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-444162.html
如果這篇文章有幫助到你，希望可以給作者點(diǎn)個(gè)贊??，創(chuàng)作不易，如果有對(duì)后端技術(shù)、前端領(lǐng)域感興趣的，也歡迎關(guān)注 ，我將會(huì)給你帶來(lái)巨大的收獲與驚喜??????！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-444162.html
到了這里，關(guān)于解決SpringBoot和前端Vue的跨域問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
