2021-01-28 16:33发布
1、JSONP:
使用方式就不赘述了,但是要注意JSONP只支持GET请求,不支持POST请求。
2、代理:
例如www.123.com/index.html需要调用www.456.com/server.php,可以写一个接口www.123.com/server.php,由这个接口在后端去调用www.456.com/server.php并拿到返回值,然后再返回给index.html,这就是一个代理的模式。相当于绕过了浏览器端,自然就不存在跨域问题。
3、PHP端修改header(XHR2方式)
在php接口脚本中加入以下两句即可:
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
4、iframe
所以跨域通信其实很简单,在iframe和主页里都不断地检测hashtag有没有变化,一旦有变化,就做出相应的改变。
setInterval(function() { var hashVal = [removed].hash.substr(1); document.body.style.backgroundColor = hashVal; }, 1000);
这么做的问题就是,需要不断地去检测hashtag是否改变,效率有点低,如果能通过原生的监听来实现,就会更加高效和优雅。这里就涉及到另一个iframe特性:可以设置其他iframe的大小,即使是不同域的。而页面的resize事件是可以监听的,所以就有了下面这个模型。
主页面先把消息附加到hashtag,然后改变一个隐藏的(或者页面外的)iframe的size。这个iframe会监听resize事件,同时捕获到hashtag。捕获到hashtag后(也就是所需的数据),再对hashtag做进一步的处理。处理完后把数据传到主页内的一个iframe,或者直接操作该iframe。这样就比较优雅地完成了跨域操作。
5、 通过 window.name 实现跨域
这篇文章是对 JavaScript跨域总结与解决办法 的补充。
有三个页面:
a.com/app.html:应用页面。
a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面在同一域下。
b.com/data.html:应用页面需要获取数据的页面,可称为数据页面。
实现起来基本步骤如下:
在应用页面(a.com/app.html)中创建一个iframe,把其src指向数据页面(b.com/data.html)。数据页面会把数据附加到这个iframe的window.name上,data.html代码如下:
[removed] window.name = 'I was there!'; // 这里是要传输的数据,大小一般为2M,IE和firefox下可以大至32M左右 // 数据格式可以自定义,如json、字符串[removed]
在应用页面(a.com/app.html)中监听iframe的onload事件,在此事件中设置这个iframe的src指向本地域的代理文件(代理文件和应用页面在同一域下,所以可以相互通信)。app.html部分代码如下:
[removed] var state = 0, iframe = document.createElement('iframe'), loadfn = function() { if (state === 1) { var data = iframe.contentWindow.name; // 读取数据 alert(data); //弹出'I was there!' } else if (state === 0) { state = 1; iframe.content[removed] = "http://a.com/proxy.html"; // 设置的代理文件 } }; iframe.src = 'http://b.com/data.html'; if (iframe.attachEvent) { iframe.attachEvent('onload', loadfn); } else { iframe.onload = loadfn; } document.body.appendChild(iframe);[removed]
获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)。
[removed] iframe.contentWindow.[removed](''); iframe.contentWindow.close(); document.body.removeChild(iframe);[removed]
总结起来即:iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。
6.HTML5中最炫酷的API之一(window.postMessage)
就是 跨文档消息传输Cross Document Messaging。高级浏览器Internet Explorer 8+, chrome,Firefox , Opera 和 Safari 都将支持这个功能。这个功能实现也非常简单主要包括接受信息的”message”事件和发送消息的”postMessage”方法。
2、 通过 window.name 实现跨域
3、代理:
1、jsonp跨域JSONP(JSON with Padding:填充式JSON),应用JSON的一种新方法,JSON、JSONP的区别: 1、JSON返回的是一串数据、JSONP返回的是脚本代码(包含一个函数调用) 2、JSONP 只支持get请求、不支持post请求 (类似往页面添加一个script标签,通过src属性去触发对指定地址的请求,故只能是Get请求)
2、nginx反向代理: www.baidu.com/index.html需要调用www.sina.com/server.php,可以写一个接口www.baidu.com/server.php,由这个接口在后端去调用www.sina.com/server.php并拿到返回值,然后再返回给index.html 3、PHP端修改header header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问 header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式 4、document.domain跨域分为两种,一种xhr不能访问不同源的文档,另一种是不同window之间不能进行交互操作; document.domain主要是解决第二种情况,且只能适用于主域相同子域不同的情况; document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。例如:a.b.example.com中某个文档的document.domain可以设成a.b.example.com、b.example.com 、example.com中的任意一个,但是不可以设成c.a.b.example.com,因为这是当前域的子域,也不可以设成baidu.com,因为主域已经不相同了。兼容性:所有浏览器都支持;优点: 可以实现不同window之间的相互访问和操作;缺点: 只适用于父子window之间的通信,不能用于xhr; 只能在主域相同且子域不同的情况下使用;
【1】设置document.domain解决无法读取非同源网页的 Cookie问题
【2】跨文档通信 API:window.postMessage()
【3】JSONP
【4】CORS
PHP端修改header(XHR2方式)
iframe
通过 window.name 实现跨域
vue配置反向代理解决跨域问题。
配置:config/index.js中的proxyTable
config/index.js
proxyTable
dev{
proxyTable: {
'/api': {
target: 'http://192.168.0.1:200', // 要代理的域名
changeOrigin: true,//允许跨域
pathRewrite: {
'^/api': '' // 这个是定义要访问的路径,名字随便写
}
使用时:
// /api/getMenu相当于*http://192.168.0.1:200/getMenu
// /api相当于http://192.168.0.1:200
this.$http.get("/api/getMenu", {
.then(res => {
})
.catch(function(error) {
});
1.重构响应式系统,使用Proxy替换Object.defineProperty,使用Proxy优势:•可直接监听数组类型的数据变化•监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升•可拦截apply、ownKeys、has等13种方法,而Object.define...
vue页面跳转后返回原页面初始位置 vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly...
这个问题建议你系统了解下MVC→MVP→MVVM的进化历程。(1)首先说下MVC MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写。MVC开始是存在于桌面程序中,使用MVC的目的是将M和V的实现代码分离。从图里可以看...
目前,对于SEO支持比较好的项目方案是采用服务端渲染。所以如果项目有SEO需求,那么比较好的方案是服务端渲染。如果你已经采用了前后分离的单页项目,而你的网站内容不需要AJAX去获取内容和展示内容,那么可以试试 prerender-spa-plugin 这个插件,这个插件是...
Bootstrap和vue不是一个层级的东西.Bootstrap是在jquery时代的UI组件库,而且Bootstrap大部分组件是依赖css的,依赖jQuery的组件主要是有交互的弹窗组件、下拉菜单等
首先你需要引入另一个界面,然后通过$refs.refName的方式调用弹框的方法后者直接把弹框的属性置成true。注意需要另一个页面渲染完成后才能用【$refs.refName】
是的,前端不会Vue根本就没必要再聊下去了
这里有一篇文章可以帮助你https://blog.csdn.net/qq_40282732/article/details/105962708
内部图表大小是与div容器大小位置相关的,如果想调整图表大小位置,调整div的属性就可以。如果是想调整图表与div间上下左右留白,则设置grid属性就可以。
使用 /deep/ 注意:使用 cass 和 less 只能使用 /deep/ 这个方法
创建icons/svg文件夹将svg文件放在该文件夹下面在components文件夹中创建svgiconfont.vue文件文件内容: [removed] import '@/icons' export default { name: 'svg-icon', props: { iconClass: { ...
引用数据类型数组的元素是对象引用,没有实际的值,需要给它实例。例如date days = new date[5];days[0] = new date(2000,12,3)每一个days都要去分配。而基础类型都有默认初始值。
计算属性与响应式并不冲突对立的存在,计算属性往往是用于数据的聚合或者离散,数据响应式的话就是视图响应数据变动(先容我装个逼)在vue中就是通过watcher调用一次实例对象中data的数据(当然这层数据也会做一层映射,映射到实例的属性中)在数据的defineOb...
Vue中有一个自带的transition组件,就是用来实现过渡效果的,具体怎么使用呢,很简单,其实就两个步骤:①用transition组件,把要做过渡效果的元素包起来②写上相应的过渡效果的css是不是很简单,比把大象装冰箱还简单。然而,并没有,在这两个步骤中,我们要...
最多设置5个标签!
1、JSONP:
使用方式就不赘述了,但是要注意JSONP只支持GET请求,不支持POST请求。
2、代理:
例如www.123.com/index.html需要调用www.456.com/server.php,可以写一个接口www.123.com/server.php,由这个接口在后端去调用www.456.com/server.php并拿到返回值,然后再返回给index.html,这就是一个代理的模式。相当于绕过了浏览器端,自然就不存在跨域问题。
3、PHP端修改header(XHR2方式)
在php接口脚本中加入以下两句即可:
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
4、iframe
所以跨域通信其实很简单,在iframe和主页里都不断地检测hashtag有没有变化,一旦有变化,就做出相应的改变。
这么做的问题就是,需要不断地去检测hashtag是否改变,效率有点低,如果能通过原生的监听来实现,就会更加高效和优雅。这里就涉及到另一个iframe特性:可以设置其他iframe的大小,即使是不同域的。而页面的resize事件是可以监听的,所以就有了下面这个模型。
主页面先把消息附加到hashtag,然后改变一个隐藏的(或者页面外的)iframe的size。这个iframe会监听resize事件,同时捕获到hashtag。捕获到hashtag后(也就是所需的数据),再对hashtag做进一步的处理。处理完后把数据传到主页内的一个iframe,或者直接操作该iframe。这样就比较优雅地完成了跨域操作。
5、 通过 window.name 实现跨域
这篇文章是对 JavaScript跨域总结与解决办法 的补充。
有三个页面:
a.com/app.html:应用页面。
a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面在同一域下。
b.com/data.html:应用页面需要获取数据的页面,可称为数据页面。
实现起来基本步骤如下:
在应用页面(a.com/app.html)中创建一个iframe,把其src指向数据页面(b.com/data.html)。
数据页面会把数据附加到这个iframe的window.name上,data.html代码如下:
在应用页面(a.com/app.html)中监听iframe的onload事件,在此事件中设置这个iframe的src指向本地域的代理文件(代理文件和应用页面在同一域下,所以可以相互通信)。app.html部分代码如下:
获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)。
总结起来即:iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。
6.HTML5中最炫酷的API之一(window.postMessage)
就是 跨文档消息传输Cross Document Messaging。高级浏览器Internet Explorer 8+, chrome,Firefox , Opera 和 Safari 都将支持这个功能。这个功能实现也非常简单主要包括接受信息的”message”事件和发送消息的”postMessage”方法。
1、JSONP:
使用方式就不赘述了,但是要注意JSONP只支持GET请求,不支持POST请求。
2、 通过 window.name 实现跨域
3、代理:
1、jsonp跨域
JSONP(JSON with Padding:填充式JSON),应用JSON的一种新方法,
JSON、JSONP的区别:
1、JSON返回的是一串数据、JSONP返回的是脚本代码(包含一个函数调用)
2、JSONP 只支持get请求、不支持post请求
(类似往页面添加一个script标签,通过src属性去触发对指定地址的请求,故只能是Get请求)
2、nginx反向代理:
www.baidu.com/index.html需要调用www.sina.com/server.php,可以写一个接口www.baidu.com/server.php,由这个接口在后端去调用www.sina.com/server.php并拿到返回值,然后再返回给index.html
3、PHP端修改header
header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式
4、document.domain
跨域分为两种,一种xhr不能访问不同源的文档,另一种是不同window之间不能进行交互操作;
document.domain主要是解决第二种情况,且只能适用于主域相同子域不同的情况;
document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。例如:a.b.example.com中某个文档的document.domain可以设成a.b.example.com、b.example.com 、example.com中的任意一个,但是不可以设成c.a.b.example.com,因为这是当前域的子域,也不可以设成baidu.com,因为主域已经不相同了。
兼容性:所有浏览器都支持;
优点:
可以实现不同window之间的相互访问和操作;
缺点:
只适用于父子window之间的通信,不能用于xhr;
只能在主域相同且子域不同的情况下使用;
【1】设置document.domain解决无法读取非同源网页的 Cookie问题
【2】跨文档通信 API:window.postMessage()
【3】JSONP
【4】CORS
PHP端修改header(XHR2方式)
在php接口脚本中加入以下两句即可:
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
iframe
所以跨域通信其实很简单,在iframe和主页里都不断地检测hashtag有没有变化,一旦有变化,就做出相应的改变。
这么做的问题就是,需要不断地去检测hashtag是否改变,效率有点低,如果能通过原生的监听来实现,就会更加高效和优雅。这里就涉及到另一个iframe特性:可以设置其他iframe的大小,即使是不同域的。而页面的resize事件是可以监听的,所以就有了下面这个模型。
主页面先把消息附加到hashtag,然后改变一个隐藏的(或者页面外的)iframe的size。这个iframe会监听resize事件,同时捕获到hashtag。捕获到hashtag后(也就是所需的数据),再对hashtag做进一步的处理。处理完后把数据传到主页内的一个iframe,或者直接操作该iframe。这样就比较优雅地完成了跨域操作。
通过 window.name 实现跨域
这篇文章是对 JavaScript跨域总结与解决办法 的补充。
有三个页面:
a.com/app.html:应用页面。
a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面在同一域下。
b.com/data.html:应用页面需要获取数据的页面,可称为数据页面。
vue配置反向代理解决跨域问题。
配置:
config/index.js
中的proxyTable
dev{
proxyTable: {
'/api': {
target: 'http://192.168.0.1:200', // 要代理的域名
changeOrigin: true,//允许跨域
pathRewrite: {
'^/api': '' // 这个是定义要访问的路径,名字随便写
}
}
}
使用时:
// /api/getMenu相当于*http://192.168.0.1:200/getMenu
// /api相当于http://192.168.0.1:200
this.$http.get("/api/getMenu", {
}
.then(res => {
})
.catch(function(error) {
});
相关问题推荐
1.重构响应式系统,使用Proxy替换Object.defineProperty,使用Proxy优势:•可直接监听数组类型的数据变化•监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升•可拦截apply、ownKeys、has等13种方法,而Object.define...
vue页面跳转后返回原页面初始位置 vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly...
这个问题建议你系统了解下MVC→MVP→MVVM的进化历程。(1)首先说下MVC MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写。MVC开始是存在于桌面程序中,使用MVC的目的是将M和V的实现代码分离。从图里可以看...
目前,对于SEO支持比较好的项目方案是采用服务端渲染。所以如果项目有SEO需求,那么比较好的方案是服务端渲染。如果你已经采用了前后分离的单页项目,而你的网站内容不需要AJAX去获取内容和展示内容,那么可以试试 prerender-spa-plugin 这个插件,这个插件是...
Bootstrap和vue不是一个层级的东西.Bootstrap是在jquery时代的UI组件库,而且Bootstrap大部分组件是依赖css的,依赖jQuery的组件主要是有交互的弹窗组件、下拉菜单等
首先你需要引入另一个界面,然后通过$refs.refName的方式调用弹框的方法后者直接把弹框的属性置成true。注意需要另一个页面渲染完成后才能用【$refs.refName】
是的,前端不会Vue根本就没必要再聊下去了
这里有一篇文章可以帮助你https://blog.csdn.net/qq_40282732/article/details/105962708
内部图表大小是与div容器大小位置相关的,如果想调整图表大小位置,调整div的属性就可以。如果是想调整图表与div间上下左右留白,则设置grid属性就可以。
使用 /deep/ 注意:使用 cass 和 less 只能使用 /deep/ 这个方法
创建icons/svg文件夹将svg文件放在该文件夹下面在components文件夹中创建svgiconfont.vue文件文件内容: [removed] import '@/icons' export default { name: 'svg-icon', props: { iconClass: { ...
引用数据类型数组的元素是对象引用,没有实际的值,需要给它实例。例如date days = new date[5];days[0] = new date(2000,12,3)每一个days都要去分配。而基础类型都有默认初始值。
计算属性与响应式并不冲突对立的存在,计算属性往往是用于数据的聚合或者离散,数据响应式的话就是视图响应数据变动(先容我装个逼)在vue中就是通过watcher调用一次实例对象中data的数据(当然这层数据也会做一层映射,映射到实例的属性中)在数据的defineOb...
Vue中有一个自带的transition组件,就是用来实现过渡效果的,具体怎么使用呢,很简单,其实就两个步骤:①用transition组件,把要做过渡效果的元素包起来②写上相应的过渡效果的css是不是很简单,比把大象装冰箱还简单。然而,并没有,在这两个步骤中,我们要...