跨域问题

Posted 2020-10-08 develop-

一、何为跨域

     只要协议/域名/端口有一个不同,他们之间需要的通信的话,就是跨域!!

     端口：服务器有很多端口，每一个端口对应一个服务（项目）

     1> 协议: 指的就是Http请求协议, http:// 和 https://  s:加密安全，数字证书

     2> 域名: 比如说: www.baidu.com 和 www.sxt.com

     3> 端口: web服务器 Apache, 会有很多端口!! 80 和 8080 两个端口

      浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，

      是浏览器对javascript施加的安全限制。

 

二、跨域解决方案:

     资源共享(跨域资源共享Cross-Origin Resource Sharing)和JSONP

     1 资源共享:

         1） 加请求头 header("Access-Control-Allow-Origin: *");

         2） 服务器代理 echo file_get_contents(‘http://127.0.0.1:8080/02.php‘);

          让自己的服务器去访问外部服务器，服务器之间没有界限

 

引导：

     <script src=‘03-01.js‘><script>

等于 <script>

          function show(){

               alert(‘我是show方法‘);

     </script>

     <script>

 

     <script src="http://127.0.0.1:8080/03-02.js"></script>

等于<script>

          show();

     <script>

 

json:一种数据格式，jsonp:目的拿数据      写程序：试错

三、jsonp的实现原理：

     通过src可以突破跨域的这个特征（也是一个漏洞），访问到了另外一台服务器

     同时另外一台服务器把数据返回过来！从而实现了跨域的请求

     也就是说拿到另外一条服务器的数据！！

 

四、jsonp请求： 必须有回调函数（作用：获取另外一台服务器的数据，相当于一个桥梁），属于get请求

     1.设置回调函数

     2.创建一个新的script标签

     3.设置请求地址，为了解决get缓存加了一个事件毫秒数

     4.append到页面中，相当于ajax中的send()

     function show(data){}

     var script=document.createElement(‘script‘)

     script.src=‘http://127.0.0.1:8080/jsonp.php?call=show&__‘+new Date().getTime();

     document.body.appendChild(script)

 

五、ajax和jsonp的区别：

     1.ajax通过XMLHttpRequest对象发送异步请求获取数据局，jsonp利用script的src属性获取数据

     2.Ajax可以有get请求和post请求，但是jsonp只有get请求

     3.jsonp

 

 

六、图片ping跨域:

     1.两个回调函数：onload和onerror,但是获取不到里面的内容

     2.必须请求的是一个图片才会执行onload,否则执行onerror

     限制：1）必须请求一个图片路径 2）即使请求成功，图片是二进制，用不了

     用处：广告追踪

     var img = new Image()

     img.src=;

     img.onload = function(){ cl(success）}

     img.onerror= function(){ cl(fail) }

 

二级联动

     监听下拉框的值发生变化: 用onchange: 监听表单元素值发生变化!!

     取下拉框的值: 元素.value

     <select id="city" onchange="sendJSONP();">

     if(v == 0){//如果值为0,就不发送请求

            //重置下拉框

            document.getElementById(‘area‘).innerhtml = ‘<option>--请选择--</option>‘;

            return;

     }

     script.src = ‘08.php?callback=show&__=‘+new Date().getTime()+‘&k=‘+v;

 

本人在用JSON.parse把字符串转化为json对象时，一直报错VM356:1 Uncaught SyntaxError: Unexpected token i in JSON at position 1，很费解，var str1 = "{‘name’:’cxh’,’sex’:’ man’}";一直认为这个字符串没有任何问题，最终发现，使用parse这个方法，要求很严格，必须是var str1 = ‘{ "name":"cxh","sex":" man" }’;就是json的k和value必须都用双引号包起来；

 

谨记json格式问题k和value都加双引号，单引号也不可以

var str1 = ‘{ "name":"cxh","sex":" man" }’;
console.log(JSON.parse(str1));

console.log(JSON.parse(str1)["name"]);