jsonp解决跨域问题

最新推荐文章于 2022-06-27 09:59:05 发布

su的前端之路

最新推荐文章于 2022-06-27 09:59:05 发布

阅读量405

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： jsonp 跨域

本文链接：https://blog.csdn.net/qq_38563845/article/details/79366373

javascript 专栏收录该内容

21 篇文章

订阅专栏

方法一：创建具有src属性的元素（浏览器的script、img、iframe标签是不受同源策略限制）

代码如下（以script元素为例）：

//创建一个script元素
var ele = document.reateElement('script');

//声明类型
ele.type='text/javascript';

//添加src属性，引入跨域访问的url
ele.src='http://www.b.com/gerinfo.php';

//在页面中添加新创建的script元素
document.getElementsByTagName('head')[0].appendChild(ele)

方法二：使用jquery jsonp跨域请求

// 请求成功后回调
function getData(data){
    console.log(data)
}
$.ajax({
    url: "xxxxxxxx",
    type: "GET",  		// 只能用GET请求不能用POST请求
    dataType: "jsonp",   	// 指定服务器返回的数据类型
    jsonp: "myFunction",   	// 指定参数名称
    jsonpCallback: "getData",   // 指定回调函数名称
    success: function (data) {
        console.log(data)
    }
})

服务端代码（JAVA）：

//前端传过来的回调函数名称
String callback = request.getParameter("myFunction");
//用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
result = callback + "(" + result + ")";
response.getWriter().write(result);

方法三：服务端做处理

// 在服务端头部加上下面两句代码：
header("Access-Control-Allow-Origin:*")
header("Access-Control-Allow-Methods:POST,GET")