zoukankan      html  css  js  c++  java
  • 跨域问题

    一、何为跨域
         只要协议/域名/端口有一个不同,他们之间需要的通信的话,就是跨域!!
         端口:服务器有很多端口,每一个端口对应一个服务(项目)
         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"]);
  • 相关阅读:
    AC自动机讲解超详细
    区间树Splay——[NOI2005]维护数列
    区间树Splay——[NOI2005]维护数列
    Trie学习总结
    微信小程序刮刮乐
    微信小程序获得高度
    微信小程序多video播放暂停问题
    vue中的问题思考
    vue的开发技巧
    微信小程序消息推送,前端操作
  • 原文地址:https://www.cnblogs.com/develop-/p/7577097.html
Copyright © 2011-2022 走看看