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的一种‘使用模式’，允许网页从其他域名(网站)获取信息，即跨域读取数据。
！声明文档类型
超文本标记语言
头
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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。