产生跨域的问题

产生跨域的问题 协议：例http:// 是协议 ，https:// 是协议 域名:baidu.com 是域名 端口:8080 是端口

浏览器使用ajax时，如果请求的接口地址和当前打开的页面地址不同源称之为跨域 (1) ajax :浏览器只有使用ajax发送请求才会出现跨域。 href属性与srC属性不会出现跨域 (2) 接口地址: ajax请求的url (3)打开的页面:当前页面的window.location.href (4)不同源:浏览器使用ajax,向不同源的接口发送请求，称之为跨域访问

---

。同源定义:两个yr|地址的协议与主机与端口均一致(&&) 协议: http, https, file 主机:域名或者ip地址 (127.0.0.1) 端口: 3000， 4399 。不同源定义:两个yrl地址， 协议主机端口任何一个不一致(||) 同源：协议和地址和端口一样 不同源：有一个不同

---

4.为什么要有同源与不同源?

。出于安全考虑，浏览器不允许，页面向不同源的接口请求数据，因为如果接口和网页不同源，浏览器认 为是2个不同的服务器, 。不同的服务器中内容是不可控的,不允许访问了 。总结说人话:浏览器为了保护你的电脑安全

---

如果你想将一些数据提交到不同协议和域名和端口的网站的时候就会产生跨域

文章目录

产生跨域的问题一、解决跨域的解决方法一（设置请求头）传统的解决方式设置想响应头 二、解决方法二使用json理解json原理那么如果以标签的形式

---

一、解决跨域的解决方法一（设置请求头）

传统的解决方式设置想响应头

<script> function fun() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { // console.log(xhr.readyState); if(this.readyState==4){ alert(this.responseText); } } xhr.open('post', ' ./ajax.php'); //post请求必须要有请求头 xhr.setRequestHeader('Content-type',"application/x-www-from-form-urlencoded"); xhr.send("user='alice'&age=23");//三次握手 console.log(' aaa '); } fun(); console.log('ccc'); </script>

二、解决方法二使用json

理解json原理

** 1.浏览器页面上使用ajax发请求，当前页面地址和ajax请求的地址不同源，才有跨域限制. 2.是script标签的src属性发的请求，img的src属性发的请求 link标签的href发的请求，都是没有跨域限制** script标签请求回来的东西，都会以js执行

<!-- //请求我们写好这个app的接口 --> <scrip src="http://127.0.0.1:6666/?callback=fn2"> <!-- //传入函数 --> </script> <script> function fn(){ console.log('执行这个函数') } function fn2(backData){ console.log('执行这个函数') //那这个函数的形参，就是访问的后端接口传递过来的数据 console.log(backData) } </script>

那么如果以标签的形式

//如果这个访问的接口支持jsonp,那发送ajax请求就可以使用jsonp jQuery使用jsonp，就有一个参数dataType: 'jsonp 他的本质(他的原理)也是通过自动创建script标签

<script> // js的形式是添加script标签然后通过script不会存在跨域问题 $(function () { //准备 好一个函数 function sb(backData) { //这个backData就接收后端传递过来的数据 console.log(backData); } //给按钮设置一个点击事件 $('#btn').on('click', function () { //1.动态的创建一个script标签 var script1 = documen.createElement('script'); $(script1).attr(' src', ' http://127.0.0.1: 6666/?callback=sb'); //2.把script标签添加到body中使用 $('body').append(script1); }) }) // jQuery的形式 $(function () { //给按钮设置点击事件 $('#btn').on('click', function () { $.ajax({ url: 'http://127.0.0.1: 6666/all', dataType: 'jsonp',//前提接口本身主持jsonp // data:{ // }, success: function (backData) { console.log(backData); } }); }) }) </script>