解决ajax跨域问题小结

最新推荐文章于 2024-08-12 12:09:40 发布

小黄果

最新推荐文章于 2024-08-12 12:09:40 发布

阅读量259

点赞数

分类专栏：异步知识文章标签： ajax跨域问题

本文链接：https://blog.csdn.net/sen_03/article/details/109372872

版权

异步知识专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了浏览器的同源策略及其对跨域访问的影响，包括无法共享cookies、操作DOM和发送AJAX请求的限制。提到了两种跨域解决方案：JSONP和CORS。JSONP通过动态插入script标签实现GET请求的跨域，依赖前后端配合；CORS则通过后台设置Access-Control-Allow-Origin header允许特定或所有域名访问。CORS还涉及跨域预检请求和携带凭据的跨域请求。

摘要由CSDN通过智能技术生成

跨域（不同源）

一.同源

判断标准：协议相同，域名相同，端口相同

二.跨域

不同源就是跨域，跨域访问会存在安全问题，所有浏览器对跨域进行限制：
① 不能共享cookies
② 不能互相操作dom
③ 不能发送ajax请求

1.跨域可以使用jsonp解决（dataType:jsonp）

$.ajax({
	dataType:'jsonp';	// 设置为jsonp即可解决跨越问题
})

jsonp的原理：在跨域的情况下，$.ajax内部并没有使用XMLHttpRequest（通过XMLHttpRequest请求服务器会受到浏览器的限制），jsonp的本质是使用script的src属性跨域请求的服务器。

jsonp请求服务器的步骤：
① 前端需要先定好一个方法，利用script将把方法名传递给后台
② 后台会获取方法名，然后在方法名后面拼接括号，在向括号中填充json数据
③ 后台会返回填充好数据的方法调用 say({“name”:“zs”, “age”:18});
④ 前端接受到返回的方法调用，会立即当做js执行，即可获取后台填充参数，进行使用

注意点：
① jsonp只能发送get请求，jsonp具有get方式的优点和缺点
② jsonp需要前后端配备才能完成

2.CROS跨域：跨域资源分享

只需要后台设置允许访问地址即可

<?php 
    //允许所有的域名访问这个接口
    // header("Access-Control-Allow-Origin:*");
    //允许指定的域名 来访问这个接口
    //http://localhost/CORS/cors.html
    header("Access-Control-Allow-Origin:http://localhost");
    echo 'hehe';
?>

跨域请求则需要秘钥（由后台判断秘钥是否正确）：

$.ajax({
	url: 路径,
    type: 'post',
    data: {			// 传参包括秘钥等
        key: 秘钥字符串
        info: 
    },
    datatype: 'json',
	success: function (info) {
		console.log(info);
	}
})