VUE跨域详解以及常用解决跨域的方法
作者:逩跑鍀小学生 发布时间:2024-06-07 16:04:29
跨域
当我们遇到请求后台接口遇到 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
里面指定
详细讲解请查看阮大神的文章,传送门附上:CORS详解
四、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)
},
来源:https://blog.csdn.net/codingLeader/article/details/122712670
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 安装保证你的用户有权限 安装 没有 切换 rootsu root (su的意思:swich user)# rpm -ivh http://d
- 需求说明:通过在界面上输入春联的上、下批和横批汉字从而生成春联图像,最后将春联图片保存。有实际需要的还可以将春联打印。实现过程:实现思路是先
- 这篇文章主要介绍了python获取网络图片方法及整理过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需
- Console 对象提供对浏览器控制台的接入(如:Firefox 的 Web Console)。不同浏览器上它的工作方式是不一样的,但这里会
- 1.假如有下述表格mytabe字段1 username 字符串型(姓名)字段2 &nb
- aspx: <div id="selDiv" style=" z-index:100; visibili
- 使用pip安装python库的几种方式1、使用pip在线安装1.1 安装单个package格式如下:pip install SomePack
- 说明:几个简单的基本的sql语句 选择:select * from table1 where 范围 插入:insert into table
- 前言:本篇博客继续学习BeautifulSoup,目标站点选取“溧阳摄影圈”,这一地方论坛。目标站点
- 对于非连续数据集,数据可视化时候需要每七天一个采样点。要求是选择此前最新的数据作为当日的数据展示,譬如今天是2019-06-18,而数据集里
- 本文较为详细的讲述了PHP图片库imagemagick的安装方法。分享给大家供大家参考。具体方法如下:1.下载ImageMagickhttp
- 1. 前言CASE 表达式是从 SQL-92 标准开始被引入的。在 CASE 表达式里,可以使用 BETWEEN 、LIKE和 < 、
- Mysql 二进制安装方法下载mysqlhttps://dev.mysql.com/downloads/mysql/1.解压包tar xf
- 本文实例讲述了Go语言单链表实现方法。分享给大家供大家参考。具体如下:1. singlechain.go代码如下:////////////单
- 背景随着Web技术的发展和移动互联网的发展,Hybrid技术已经成为一种前端开发的主流技术方案。那什么是Hybrid App呢?Hybrid
- 早就听说requests的库的强大,只是还没有接触,今天接触了一下,发现以前使用urllib,urllib2等方法真是太搓了……这里写些简单
- Bootstrap是现在最流行的CSS框架,有许多网站、后台管理系统的样式都是基于Bootstrap设计的。然而,Bootstrap 始终保
- 前言上回在 用 Go 写一个轻量级的 ssh 批量操作工具 里提及过,我们做 Golang 并发的时候要对并发进行限制,对 goroutin
- mysql -uusername -pyourpassword yourdatabasename < c:\sqlfile.sql其中
- 在IE6中背景属性加 a 与 a:hover 两者的伪类结合,在正常逻辑下为何不起作用?测试这问题存在IE6及以下浏览器,这问题我经常遇到在