常见的几种跨域方法

最新推荐文章于 2022-05-11 08:24:26 发布

云歌Yg

最新推荐文章于 2022-05-11 08:24:26 发布

阅读量2.4k

点赞数 1

分类专栏：学习笔记文章标签：前端跨域 jsonp ajax

本文链接：https://blog.csdn.net/weixin_42536144/article/details/80816323

版权

学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、域和跨域

域：

根据字面意思我们可以地域、区域。比如我国分为七大区域，每个区域又划分为省市区等：

而互联网上的域，我们可以理解为在互联网上占据的区域。

跨域：

如果现在有两个服务器在服务器上：服务器A 、服务器B。

访问服务器A得到一个页面index.html。从该index.html页面发出一个http请求，如果请求的是A上的内容，这是允许的，

因为index.html的源在A上。但是如果发送的http请求，请求的是B服务器上的内容。这就是跨域。

那什么是同域：协议相同、域名相同，端口相同，只要其中一个不同就为跨域。

二.同源策略

请求的url地址,必须与浏览器上的url地址相同，在同一个域上。

例如：用AJAX发送请求

$.ajax({
	url: "http://localhost:3000/test",
	type: "get",
	data: {
		
	},
	dataType: "json",
	success: function(data) {
		console.log(data);
	}
})

通过浏览器访问：

此时，会比较ajax的目标域与当前index.html文件所在域是否同源

AJAX: http://localhost:3000

index.html: http://192.168.2.187:3000

发现域名不一样，此时就会报错

上面就是javascript的同源保护策略，该策略属于安全层面的策略。

三.JSONP

AJAX直接请求普通文件存在跨域无权限访问的问题，不管是静态资源也好。

JSONP 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案。

拥有scr这个属性的标签都可以跨域例，比如<script><img><iframe>。

JSONP原理：利用script标签不受同源策略影响，并且还能够执行代码的特点。返回的是函数的执行。

四.JSONP跨域解决方案

4.1 基于script标签

<script type="text/javascript">
    function success(a) {
        console.log(a)
    }
</script>
<script type="text/javascript" src="http://localhost:3000/test?callback=success"></script>

得到的响应数据：

4.2 基于jQuery跨域

jquery已经把跨域封装到ajax上了,让跨域变得方便；注意:jQuery中的跨域请求是只能是get请求不能使用post请求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<script src="js/jquery-1.12.3.min.js"></script> 
<script type="text/javascript">
    $(document).ready(function(){
            $.ajax({
            type : 'get',
            url:"http://localhost:3000/test",
            data : {
            },
            cache :false,
            jsonp: "callback",
            jsonpCallback:"success",
            dataType : 'jsonp',
            success:function(data){
                console.log(data);
            },
            error:function(data){
                console.log(data.error);
            }        
        });
    });
</script>
</body>
</html>

jsonp 传递给请求页面或数据的，用以获得jsonp回调函数名(默认为:callback)

jsonpCallback 自定义的jsonp回调函数名，默认为jQuery自动生成的随机函数名

请求头:ajax发送的url请求会自动带上callback参数,当服务端获取到这个参数值后,作为函数名返回回来.

响应头：返回一个函数的执行。

以上就是常用的jsonp解决跨域的两种方式，技术不精，如有错误，还请指正。部分类容参考网络，如有侵权会立即删除。

云歌Yg

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录