文档章节

解决js跨域的问题

jinzili777
 jinzili777
发布于 2017/06/26 17:34
字数 479
阅读 15
收藏 0

什么是跨域?

Js为了安全有一个限制,不允许跨域访问。 1、如果两个url的域名不同 2、Url相同,端口不同也是跨域 3、Ip不同也是跨域

解决方法

方法的原理

可以使用jsonp解决跨域的问题。 1、在js中不能跨域请求数据,js可以跨域请求js片段。 2、可以把数据包装成js片段。可以把数据使用js方法来包装,形成一条方法的调用语句。 3、可以使用ajax请求js片段,当js判断到达浏览器会被立即执行。 4、在浏览器端,先创建好回调方法,在回调方法中通过参数可以获得请求的数据。 原理

前期准备

1、需要把js的回调方法先写好。 2、做ajax请求时,需要把回调方法的方法名传递给服务端。 3、服务端接收回调方法名,把数据包装好,响应给客户端。

例子

首先,在客户端要把回调方法写好,简单的说就是假设你已经取到了数据,哪些方法要用到这些数据先写好。 假设一个click事件:

var url = "http://localhost:8081/data.json?callback=getDataService";
$("#button").click(function(){
	$.getJSONP(url);
	//或者是$.getJSONP(url,getDataService),一定要用$.getJSONP,使用$.getJSON还是会遇到无法跨域请求的问题。
});
getDateService(data){
	//取得数据,执行业务逻辑
}

在服务端: 原始json数据为:

{
    "data": [
        {
            "k": "key",
            "v": "value"
        }
    ]
}

这时候要将回调函数加到原始的json数据中,将服务端中json数据改为:

getDataService({
    "data": [
        {
            "k": "key",
            "v": "value"
        }
    ]
}};

将原始json数据包装成js片段。此时当包装后的js片段到达浏览器时会自动执行。这里的getDataService就是浏览器端要执行的函数名。

© 著作权归作者所有

jinzili777
粉丝 2
博文 10
码字总数 8037
作品 0
宝山
程序员
私信 提问
JavaScript跨域问题解决办法

一、什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下...

谢思华
2015/08/24
219
0
第113天:Ajax跨域请求解决方法

一、原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要传递数据发送n...

半指温柔乐
2017/12/13
0
0
javascript跨域请求解决方法总结

javascript中有同源策略,javascript存在跨域通信的问题。典型例子如:Ajax无法直接请求跨域的普通文件,存在跨域无权限访问的问题。 几种常见的解决方法: 1.JSONP 2. window.name+frame 3...

wait106427
2015/08/18
358
0
js错误问题 The operation is insecure.

问题:   当我使用canvas的ctx.getImageData 方法时,js报错,错误是 The operation is insecure. 解决:   我使用ctx.getImageData获取canvas上的像素数据,但是我加载的图片是一张跨域...

飞翔的熊blabla
2018/12/29
0
0
使用iframe解决Javascript跨域问题

在今年的baidu salon分享会上黄方荣主讲的《WEB数据交互的艺术》中提到一个非常优雅绝妙的解决方案!话不多说,直接上解决方案原理图: 该图要解决的问题说明如下: 在AAA.com域名下的index...

黄平俊
2010/08/13
5.9K
3

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.4K
15
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
41
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部