您好,登錄后才能下訂單哦!
這篇文章主要介紹“VUE如何解決跨域問(wèn)題”,在日常操作中,相信很多人在VUE如何解決跨域問(wèn)題問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”VUE如何解決跨域問(wèn)題”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
當(dāng)我們遇到請(qǐng)求后臺(tái)接口遇到 Access-Control-Allow-Origin 時(shí),那說(shuō)明跨域了。
跨域是因?yàn)闉g覽器的同源策略所導(dǎo)致,同源策略(Same origin policy)是一種約定,它是瀏覽器最核心也最基本的安全功能,同源是指:域名、協(xié)議、端口相同
1、在vue.config.js中設(shè)置如下代碼片段
module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { // 配置跨域 '/api':{ target:`http://www.baidu.com`, //請(qǐng)求后臺(tái)接口 changeOrigin:true, // 允許跨域 pathRewrite:{ '^/api' : '' // 重寫(xiě)請(qǐng)求 } } }, }
2、創(chuàng)捷axioss實(shí)例時(shí),將baseUrl設(shè)置為 ‘/api’
const http = axios.create({ timeout: 1000 * 1000000, withCredentials: true, BASE_URL: '/api' headers: { 'Content-Type': 'application/json; charset=utf-8' } })
Jsonp(JSON with Padding) 是 json 的一種"使用模式",可以讓網(wǎng)頁(yè)從別的域名(網(wǎng)站)那獲取資料,即跨域讀取數(shù)據(jù)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="textID"></div> <script type="text/javascript"> function text_jsonp(req){ // 創(chuàng)建script的標(biāo)簽 var script = document.createElement('script'); // 拼接 url var url = req.url + '?callback=' + req.callback.name; // 賦值url script.src = url; // 放入頭部 document.getElementsByTagName('head')[0].appendChild(script); } </script> </body> </html>
在CORS請(qǐng)求,頭部信息中包含以下三個(gè)字段:
Access-Control-Allow-Origin: 該字段是必須的。它的值要么是請(qǐng)求時(shí)Origin
字段的值,要么是一個(gè)*
,表示接受任意域名的請(qǐng)求,
Access-Control-Allow-Credentials: 可選,值為布爾值,表示是否允許發(fā)送Cookie。默認(rèn)情況下,Cookie不包括在CORS請(qǐng)求之中。設(shè)為true
,即表示服務(wù)器明確許可,Cookie可以包含在請(qǐng)求中,一起發(fā)給服務(wù)器。這個(gè)值也只能設(shè)為true。如果要發(fā)送Cookie,Access-Control-Allow-Origin必須設(shè)置為必須指定明確的、與請(qǐng)求網(wǎng)頁(yè)一致的域名
Access-Control-Expose-Headers:可選。CORS請(qǐng)求時(shí),XMLHttpRequest
對(duì)象的getResponseHeader()
方法只能拿到6個(gè)基本字段:Cache-Control
、Content-Language
、Content-Type
、Expires
、Last-Modified
、Pragma
。如果想拿到其他字段,就必須在Access-Control-Expose-Headers
里面指定
詳細(xì)講解請(qǐng)查看阮大神的文章,傳送門(mén)附上:CORS詳解
iframe(src){ //數(shù)組 if(Array.isArray(src)){ this.docs.visible = true; }else{ this.docs.visible = false; } this.link = src if(this.docs.visible == false){ if(this.$refs['ruleIframe'] && this.$refs['ruleIframe'].querySelector('iframe')){ this.$refs['ruleIframe'].querySelector('iframe').remove() //刪除自身 } var iframe = document.createElement('iframe'); iframe.width = '100%'; iframe.height = '100%'; iframe.setAttribute('frameborder','0') iframe.src = src; this.append(iframe) } }, //創(chuàng)建元素 防止 獲取不到 ruleIframe 遞歸 append(iframe){ if(this.$refs['ruleIframe']){ this.$refs['ruleIframe'].appendChild(iframe); return } setTimeout(()=>{ this.append(iframe); },500) },
到此,關(guān)于“VUE如何解決跨域問(wèn)題”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。