資訊專欄INFORMATION COLUMN
跨域
要知道在請求后臺接口遇到Access-Control-Allow-Origin 時，這就表明跨域了。
首先解釋跨域，是因為瀏覽器的同源策略所導(dǎo)致，同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，同源是指：域名、協(xié)議、端口相同
解決跨域常用方法：
一、VUE中常用proxy來解決跨域問題
1、在vue.config.js中設(shè)置如下代碼片段
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: { // 配置跨域
'/api':{
target:`http://www.baidu.com`, //請求后臺接口
changeOrigin:true, // 允許跨域
pathRewrite:{
'^/api' : '' // 重寫請求
}
}
},
}2、創(chuàng)捷axioss實例時，將baseUrl設(shè)置為 ‘/api’
const http = axios.create({
timeout: 1000 * 1000000,
withCredentials: true,
BASE_URL: '/api'
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})二、JSONP解決跨域
Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網(wǎng)頁從別的域名（網(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是跨域資源共享（Cross-Origin Resource Sharing），以 ajax 跨域請求資源，支持現(xiàn)代瀏覽器，IE支持10以上
在CORS請求，頭部信息中包含以下三個字段：
Access-Control-Allow-Origin：該字段是必須的。它的值要么是請求時Origin字段的值，要么是一個*，表示接受任意域名的請求，
Access-Control-Allow-Credentials：可選，值為布爾值，表示是否允許發(fā)送Cookie。默認(rèn)情況下，Cookie不包括在CORS請求之中。設(shè)為true，即表示服務(wù)器明確許可，Cookie可以包含在請求中，一起發(fā)給服務(wù)器。這個值也只能設(shè)為true。如果要發(fā)送Cookie，Access-Control-Allow-Origin必須設(shè)置為必須指定明確的、與請求網(wǎng)頁一致的域名
Access-Control-Expose-Headers：可選。CORS請求時，XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必須在Access-Control-Expose-Headers就在其中
四、iframe實現(xiàn)跨域
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跨域詳解以及常用解決跨域方法已全部講述完畢，歡迎大家關(guān)注更多后續(xù)精彩內(nèi)容。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/128384.html
摘要：服務(wù)端接收到請求后，通過該參數(shù)獲得回調(diào)函數(shù)名，并將數(shù)據(jù)放在參數(shù)中將其返回收到結(jié)果后因為是標(biāo)簽，所以瀏覽器會當(dāng)做是腳本進(jìn)行運行，從而達(dá)到跨域獲取數(shù)據(jù)的目的。 在使用Vue搭建的一個后端管理系統(tǒng)中，我使用axios請求本地的Node環(huán)境下的接口，但是請求失敗，然后我錯誤信息是：showImg(https://segmentfault.com/img/remote/1460000018521...
摘要：前言騰訊一面，相比阿里一面來說，騰訊一面先給打電話預(yù)定時間，這也給了我們這些面試者去準(zhǔn)備的時間。其實閉包也就是指有權(quán)訪問另一個函數(shù)作用域的函數(shù)而已。常用的創(chuàng)建閉包的方法就是在函數(shù)內(nèi)部創(chuàng)建另一個函數(shù)。 前言 騰訊一面，相比阿里一面來說，騰訊一面先給打電話預(yù)定時間，這也給了我們這些面試者去準(zhǔn)備的時間。但是也正是因為這種確定性，也有在等待電話的時候的心情的忐忑。 背景 我是一名大三學(xué)生，大一...
摘要：面試題來源于網(wǎng)絡(luò)，看一下高級前端的面試題，可以知道自己和高級前端的差距。 面試題來源于網(wǎng)絡(luò)，看一下高級前端的面試題，可以知道自己和高級前端的差距。有些面試題會重復(fù)。 使用過的koa2中間件 koa-body原理 介紹自己寫過的中間件 有沒有涉及到Cluster 介紹pm2 master掛了的話pm2怎么處理 如何和MySQL進(jìn)行通信 React聲明周期及自己的理解 如何...
閱讀 506·2023-03-27 18:33
閱讀 709·2023-03-26 17:27
閱讀 607·2023-03-26 17:14
閱讀 578·2023-03-17 21:13
閱讀 503·2023-03-17 08:28
閱讀 1755·2023-02-27 22:32
閱讀 1262·2023-02-27 22:27
閱讀 2067·2023-01-20 08:28
