vue跨域问题的三种解决方案,vue中解决跨域,VUE跨域详解以及常用解决跨域的方法

vue跨域问题的三种解决方案,vue中解决跨域,VUE跨域详解以及常用解决跨域的方法

跨域意味着浏览器不允许当前页面的源从另一个源请求数据。下面文章主要介绍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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: