友情提醒
先看文章目錄，大致了解知識(shí)點(diǎn)結(jié)構(gòu)，直接點(diǎn)擊文章目錄可以跳轉(zhuǎn)到文章指定位置。
第一章、跨越問(wèn)題解決
1.1）什么是跨域問(wèn)題？
vue單頁(yè)應(yīng)用項(xiàng)目開(kāi)發(fā)時(shí)，避免不了要請(qǐng)求后端，這時(shí)通常就會(huì)出現(xiàn)跨域問(wèn)題
瀏覽器從一個(gè)域名的網(wǎng)頁(yè)去請(qǐng)求另一個(gè)域名的資源時(shí)，域名、端口、協(xié)議任一不同，都會(huì)導(dǎo)致跨域問(wèn)題。即前端接口去調(diào)用不在同一個(gè)域內(nèi)的后端服務(wù)器而產(chǎn)生的問(wèn)題。
1.2）第一種解決方式：后端設(shè)置允許跨域訪問(wèn)
注意：但在生產(chǎn)環(huán)境下，為了安全起見(jiàn)，還是建議不要設(shè)置允許跨域訪問(wèn)，或者 限制允許跨域的IP
例如：SpringMVC允許跨域的設(shè)置
1.使用的方式用@Controller和@CrossOrgin一起使用，可以實(shí)現(xiàn)跨域！
只有Spring版本從4.2開(kāi)始才有跨域支持！
//某個(gè)方法支持跨域訪問(wèn)：在方法上增加@CrossOrigin注解
@RequestMapping("/crossDomain2.action")
@ResponseBody
@CrossOrigin
public String crossDomain2(HttpServletRequest req, HttpServletResponse res, String name){
return null;
}
整個(gè)Controller都支持跨域訪問(wèn)
//整個(gè)Controller都支持跨域訪問(wèn)，在類(lèi)上面加上注解@CrossOrigin
@Controller
@CrossOrigin
public class TestController {
}
2.使用定義全局的跨域配置：可以通過(guò)實(shí)現(xiàn)WebMvcConfigurer并重寫(xiě) addCorsMappings方法來(lái)實(shí)現(xiàn)跨域
3.使用過(guò)濾器方式
public class HeaderFilter implements Filter{
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest)req;
HttpServletResponse response = (HttpServletResponse) res;
String originHeader = request.getHeader("Origin");
response.setHeader("Access-Control-Allow-Origin", originHeader);
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "0");
response.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("XDomainRequestAllowed","1");
response.setHeader("XDomainRequestAllowed","1");
chain.doFilter(request, response);
}
}
1.3）第二種解決方式：前端配置代理
代理服務(wù)器的主要思想是通過(guò)建立一個(gè)端口號(hào)和前端相同的代理服務(wù)器進(jìn)行中轉(zhuǎn)，從而解決跨域問(wèn)題。因?yàn)榇矸?wù)器與前端處于同一個(gè)域中，不會(huì)產(chǎn)生跨域問(wèn)題；而且代理服務(wù)器與服務(wù)器之間的通信是后端之間的通信，不會(huì)產(chǎn)生跨域問(wèn)題。
原理：瀏覽器和服務(wù)器當(dāng)：協(xié)議、ip、端口號(hào)有一個(gè)不一致，就是違背同源策略
找一個(gè)和瀏覽器同源的服務(wù)器，讓這個(gè)服務(wù)器幫我們代理給別的服務(wù)器發(fā)請(qǐng)求服務(wù)器之間不必遵守同源策略
第二章、配置代理服務(wù)器
vue-cli配置代理的兩種方法：都要編寫(xiě)vue.config.js
2.1）配置簡(jiǎn)單代理服務(wù)器
①優(yōu)點(diǎn)：配置簡(jiǎn)單，請(qǐng)求資源時(shí)直接發(fā)給前端(8080)即可
②缺點(diǎn)：不能配置多個(gè)代理，不能靈活的控制請(qǐng)求是否走代理
③工作方式：若按照上述配置代理，當(dāng)請(qǐng)求了不存在的資源時(shí)，那么該請(qǐng)求就 會(huì)轉(zhuǎn)發(fā)給服務(wù)器（有限匹配前端資源）
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,//對(duì)使用的JS 語(yǔ)法進(jìn)行轉(zhuǎn)譯 不同版本使用不同
// 開(kāi)啟代理服務(wù)器，注意：這里的端口號(hào)寫(xiě)后端的端口號(hào)（方式一）
//簡(jiǎn)單代理服務(wù)器
devServer:{
port:8080,//當(dāng)前前端服務(wù)器的端口號(hào) 不寫(xiě)默認(rèn)是8080
proxy:"http://127.0.0.1:8081"//代理服務(wù)器
}
})
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-619029.html
2.2）多個(gè)代理配置
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,//對(duì)使用的JS 語(yǔ)法進(jìn)行轉(zhuǎn)譯 不同版本使用不同
// 開(kāi)啟代理服務(wù)器，注意：這里的端口號(hào)寫(xiě)后端的端口號(hào)（方式一）
/*//簡(jiǎn)單代理服務(wù)器
devServer:{
port:8080,//當(dāng)前前端服務(wù)器的端口號(hào) 不寫(xiě)默認(rèn)是8080
proxy:"http://127.0.0.1:8081"http://代理服務(wù)器
}*/
/*配置多個(gè)代理*/
devServer:{
port:9527,//前端服務(wù)器端口號(hào)變成9527
proxy:{
//配置多個(gè)代理服務(wù)器格式：
/*"/代理服務(wù)器的名字":{
target:"代理服務(wù)器的地址",
ws:true,//用于支持websocket
changeOrigin: true,// 用于控制請(qǐng)求頭中的host值 代理欺騙 可以不寫(xiě)
pathRewrite: {'^/代理服務(wù)器名字': ''} //重寫(xiě)路徑，把所有路徑中包含/代理服務(wù)器名的路徑替換為空字符串
}*/
"/myFirstProxy":{
target:"http://127.0.0.1:8081", //代理服務(wù)器的地址
ws:true,//用于支持websocket
//就是把/myFirstProxy變成了空字符串
pathRewrite:{"^/myFirstProxy":""}//重寫(xiě)路徑，把所有路徑中包含/代理服務(wù)器名的路徑替換為空字符串
},
"/mySecondProxy":{
target:"http://127.0.0.1:8082", //代理服務(wù)器的地址
ws:true,//用于支持websocket
pathRewrite:{"^/mySecondProxy":""}
}
}
}
})
發(fā)起請(qǐng)求：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-619029.html
<template>
<div>
<h1>歡迎訪問(wèn)員工管理頁(yè)面</h1>
<button @click="sendRequestDemo()">訪問(wèn)后臺(tái)服務(wù)器</button>
<button @click="sendRequestDemo2()">訪問(wèn)后臺(tái)服務(wù)器使用多代理方式</button>
</div>
</template>
<script>
import axios from "axios"
export default {
name: "EmpDemo",
methods:{
sendRequestDemo2(){
//使用多代理服務(wù)器 根據(jù)代理服務(wù)器的名字 找具體的代理服務(wù)器發(fā)起代理請(qǐng)求
axios({
method:"get",
//http://127.0.0.1:8081/vueweb001/demo1/methodDemo.action
url:"http://localhost:9527/myFirstProxy/vueweb001/demo1/methodDemo1.action"
}).then(function(result){
alert(result.data)
console.log("myFirstProxy接收到的值：",result.data)
});
},
sendRequestDemo(){
//配置簡(jiǎn)單代理服務(wù)器 發(fā)起異步請(qǐng)求 訪問(wèn)后臺(tái)服務(wù)器
axios({
method:"get",
配置簡(jiǎn)單代理服務(wù)器 請(qǐng)求資源時(shí)直接發(fā)給前端(8080)即可
//我們把請(qǐng)求發(fā)給前端服務(wù)器再由代理服務(wù)器幫我們轉(zhuǎn)發(fā)到 8081服務(wù)器
url:"http://localhost:8080/vueweb001/demo1/methodDemo1.action"
}).then(function(result){
alert(result.data)
console.log(result.data)
});
}
}
}
</script>
<style scoped>
</style>
到了這里，關(guān)于vue解決跨域訪問(wèn)問(wèn)題（個(gè)人學(xué)習(xí)筆記六）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
