跨域意味着浏览器不允许当前页面的源从另一个源请求数据。下面文章主要介绍VUE跨域的详细解释以及解决跨域的常用方法。通过示例代码非常详细的介绍,有需要的朋友可以参考一下。
目录
跨域求解的常用方法:1。代理在VUE常用于解决跨域问题;2.JSONP用于解决跨域问题;3.CORS是跨产地资源共享,使用ajax跨域请求资源,支持现代浏览器;IE支持10个以上;4.iframe实现跨域总结。
跨域
当我们遇到请求时,后台接口遇到Access-Control-Allow-Origin ,也就是跨域。
跨域是浏览器的同源策略造成的,同源策略是一种协议,是浏览器最核心最基础的安全功能。同源是指域名、协议、端口相同。
解决跨域常用方法:
一、VUE中常用proxy来解决跨域问题
1.在vue.config.js中设置以下代码片段
模块.导出={
开发人员:{
//路径
资产子目录:'静态',
assets public path:“/”,
ProxyTable: {//配置跨域
/api':{
Target: ` http://www.baidu.com ',//请求后台接口
ChangeOrigin:true,//允许跨域
路径重写:{
/API ':' '//重写请求
}
}
},
}
2.创建axioss实例时,将baseUrl设置为“/API”
const http=axios.create({
超时:1000 * 1000000,
withCredentials: true,
基本URL:“/API”
标题:{
Content-Type“:”应用程序/JSON;charset=utf-8 '
}
})
二、JSONP解决跨域
Jsonp(带填充的json)是JSON的一种‘使用模式’,允许网页从其他域名(网站)获取信息,即跨域读取数据。
!文档类型html
超文本标记语言
头
meta charset='utf-8 '
/头
身体
div id='textID'/div
脚本类型='文本/javascript '
函数text_jsonp(req){
//创建脚本的标签
var script=document . createelement(' script ');
//拼接url
' var url=req.url '?callback=' req . callback . name;
//分配url
script.src=url
//放在头上
document . getelementsbytagname(' head ')[0]。appendChild(脚本);
}
/脚本
/body
/html
三、CORS是跨域资源共享(Cross-Origin Resource Sharing),以 ajax 跨域请求资源,支持现代浏览器,IE支持10以上
在CORS请求中,标题信息包含以下三个字段:
Access-Control-Allow-Origin:此字段是必需的。它的值或者是请求时的Origin字段的值,或者是*号,表示接受任何域名的请求,
access-control-allow-credentials:可选,布尔值,表示是否允许发送Cookie。默认情况下,CORS请求中不包含Cookie。设置为true,这意味着服务器显式允许Cookie包含在请求中并一起发送到服务器。该值只能设置为true。要发送Cookie,必须设置Access-Control-Allow-Origin以指定与请求的网页一致的显式域名。
访问控制公开头:可选。当CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能得到六个基本字段: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;
}否则{
this . docs . visible=false;
}
this.link=src
if(this.docs.visible==false){
如果(这个。$refs['ruleIframe'] this。$refs['ruleIframe']。query selector(' iframe '){
这个。$ refs ['ruleiframe']。QuerySelector ('iframe ')。remove()//删除自身
}
var iframe=document . createelement(' iframe ');
iframe . width=' 100% ';
iframe . height=' 100% ';
iframe . set attribute(' frame border ',' 0 ')
iframe.src=src
这个. append(iframe)
}
},
//创建一个元素以防止获取ruleIframe递归。
追加(iframe){
如果(这个。$refs['ruleIframe']){
这个。$refs['ruleIframe']。appendChild(iframe);
返回
}
setTimeout(()={
this . append(iframe);
},500)
},
总结
以上就是本文关于VUE跨域的详细解释和跨域方法的常用解决方案。有关跨域方法的VUE解决方案的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。