資訊專欄INFORMATION COLUMN
跨域
要知道在請求后臺接口遇到Access-Control-Allow-Origin 時，這就表明跨域了。
首先解釋跨域，是因為瀏覽器的同源策略所導致，同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，同源是指：域名、協議、端口相同
解決跨域常用方法：
一、VUE中常用proxy來解決跨域問題
1、在vue.config.js中設置如下代碼片段
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: { // 配置跨域
'/api':{
target:`http://www.baidu.com`, //請求后臺接口
changeOrigin:true, // 允許跨域
pathRewrite:{
'^/api' : '' // 重寫請求
}
}
},
}2、創捷axioss實例時，將baseUrl設置為 ‘/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 的一種"使用模式"，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="textID"></div>
<script type="text/javascript">
function text_jsonp(req){
// 創建script的標簽
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 跨域請求資源，支持現代瀏覽器，IE支持10以上
在CORS請求，頭部信息中包含以下三個字段：
Access-Control-Allow-Origin：該字段是必須的。它的值要么是請求時Origin字段的值，要么是一個*，表示接受任意域名的請求，
Access-Control-Allow-Credentials：可選，值為布爾值，表示是否允許發送Cookie。默認情況下，Cookie不包括在CORS請求之中。設為true，即表示服務器明確許可，Cookie可以包含在請求中，一起發給服務器。這個值也只能設為true。如果要發送Cookie，Access-Control-Allow-Origin必須設置為必須指定明確的、與請求網頁一致的域名
Access-Control-Expose-Headers：可選。CORS請求時，XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必須在Access-Control-Expose-Headers就在其中
四、iframe實現跨域
iframe(src){
//數組
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)
}
},
//創建元素 防止 獲取不到 ruleIframe 遞歸
append(iframe){
if(this.$refs['ruleIframe']){
this.$refs['ruleIframe'].appendChild(iframe);
return
}
setTimeout(()=>{
this.append(iframe);
},500)
}, 本篇文章關于VUE跨域詳解以及常用解決跨域方法已全部講述完畢，歡迎大家關注更多后續精彩內容。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128384.html
摘要：前言騰訊一面，相比阿里一面來說，騰訊一面先給打電話預定時間，這也給了我們這些面試者去準備的時間。其實閉包也就是指有權訪問另一個函數作用域的函數而已。常用的創建閉包的方法就是在函數內部創建另一個函數。 前言 騰訊一面，相比阿里一面來說，騰訊一面先給打電話預定時間，這也給了我們這些面試者去準備的時間。但是也正是因為這種確定性，也有在等待電話的時候的心情的忐忑。 背景 我是一名大三學生，大一...
摘要：面試題來源于網絡，看一下高級前端的面試題，可以知道自己和高級前端的差距。 面試題來源于網絡，看一下高級前端的面試題，可以知道自己和高級前端的差距。有些面試題會重復。 使用過的koa2中間件 koa-body原理 介紹自己寫過的中間件 有沒有涉及到Cluster 介紹pm2 master掛了的話pm2怎么處理 如何和MySQL進行通信 React聲明周期及自己的理解 如何...
閱讀 547·2023-03-27 18:33
閱讀 732·2023-03-26 17:27
閱讀 630·2023-03-26 17:14
閱讀 591·2023-03-17 21:13
閱讀 520·2023-03-17 08:28
閱讀 1801·2023-02-27 22:32
閱讀 1292·2023-02-27 22:27
閱讀 2177·2023-01-20 08:28
