前言

??前端跨域訪問別人服務(wù)器中的某個文件時，因同源策略的問題，我們的前端拿不到別人的數(shù)據(jù)，這時候我們可以使用代理的方案來解決此問題。

同源策略

??同源策略是一種約定，而且是瀏覽器中最基本也是最核心的安全功能，若缺少了該策略，瀏覽器非常容易被攻擊；同源就是指“協(xié)議+域名+端口”都一樣，就算有兩個不同域名指向同一個IP地址也不能是同源。同源策略只有在瀏覽器中存在，服務(wù)器中確不存在，所以遇到需要跨域請求的地址將其轉(zhuǎn)發(fā)服務(wù)器后委托服務(wù)器去請求即可。

proxy代理

??在項目根目錄，自己創(chuàng)建 vue.config.js 文件。寫入以下配置：

const isProduction = process.env.NODE_ENV === 'development';module.exports = {publicPath: isProduction ? './' : '/',//為項目中的所有資源(js、css、img)指定一個基礎(chǔ)路徑devServer: {proxy: {'/a': {//根據(jù)請求路徑，匹配所有以/a開頭的路徑target: 'http://192.168.X.X:8081',//需要代理的服務(wù)器地址secure: false, // 如果是https開頭，要設(shè)置為truechangeOrigin: true, //為true時，發(fā)送請求頭中的host會設(shè)置成target。為false，則不變。默認(rèn)為truepathRewrite: { '/a': '' },// 發(fā)送請求時，請求路徑重寫：將 /a/xxx --> /xxx （去掉/a）cookiePathRewrite: {//重寫cookie路徑'/fund': '/'},}},port: '8080'//可自己修改端口}, }

以上便是proxy代理配置的基本內(nèi)容，如果想要了解前端跨域的其它解決方案，可點擊鏈接查看博主：天才小熊貓點、的相關(guān)內(nèi)容。

總結(jié)

以上是生活随笔為你收集整理的vue2.0_前端跨域解决方案之proxy代理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。