zoukankan      html  css  js  c++  java
  • 如何实现跨域!

    前言:

    这里说的js跨域是指通过js在不同的域(服务器)之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。

    要解决跨域的问题,我们可以使用以下几种方法:

    一、通过原生js实现jsonp跨域:

    实现原理:

    1、后台不是直接返回数据,而是返回一个函数,同时这个函数传入要返回的数据。

    2、前端利用script的src形式(<script src="http://xxx/tp5/public?callback=dosomething"></script>)请求接口并传入callback=dosomething(可以自定义)。(替代ajax的做法)

    代码如下:
    后台:
     public function index()
        {
            $callback = $_GET['callback'];   
            $data = array(
                'a'=>123,
                'b'=>456
            );
            return $callback.'('.json_encode($data).')';
        }

    前端:

    特别注意下面的先后顺序,必须先定义dosomething,然后通过src的形式来进行调用接口。

    <script>
            function dosomething(res) {
                console.log(res);
            }
    </script>
    <script src="http://xxxx/tp5/public?callback=dosomething"></script>

    二、通过Jquery来实现jsonp跨域!(项目中推荐使用这个!!!)

    实现原理同上!但是更简单!后台代码不变,还是返回一个函数,函数里面传入要返回的数据!

    前端代码如下:

    和一般的ajax请求一样,就是多了一句  dataType:"jsonp"!

    <script>
            $.ajax({
                url: 'http://118.24.176.74/tp5/public',
                dataType:"jsonp",
                success: function (res) {
                    console.log(res)
                }
            });
     </script>

    小结:

    1、首先弄明白跨域原理,其次项目中推荐使用Jquery来进行跨域!

    2、前端的话,加一句即可dataType:"jsonp"; 

    3、后台需要改变三处    (1)$callback = $_GET['callback'];  (2) return $callback.'('.json_encode($data).')' (3)把post请求改为get请求!;

     -------------------------------------------------------------------------------------------------------------------------------------------------------补充-------------------------------------------------------------------------------------------------------------------

    php返回数据,可以调用以下函数来实现灵活切换为返回格式。

    function api_jsonp_encode($json)
        {
            if (!empty($_GET['callbak'])) {
                return $_GET['callbak'] . '(' . $json . ')'; // jsonp
            }
            return $json; // json
        }

    特别注意:如果采用jsonp跨域请求,则请求方式默认就是get ,因此后台的代码也得改为get式的获取数据!

    后台解决跨域:

    php中:

    header('Access-Control-Allow-Origin: *');
    注意:这个在php非框架中可以用,但是在tp5等框架中有问题,需要用行为或者中间件来操作!
  • 相关阅读:
    未来简史之数据主义(Dataism)
    10分钟看懂《人类简史》和《未来简史》
    SignalR来做实时Web聊天
    .Net Core应用搭建的分布式邮件系统设计
    AspNetCore-MVC实战系列(四)之结尾
    AspNetCore-MVC实战系列(三)之个人中心
    AspNetCore-MVC实战系列(二)之通过绑定邮箱找回密码
    AspNetCore
    爱留图
    .NetCore上传多文件的几种示例
  • 原文地址:https://www.cnblogs.com/teamemory/p/9828895.html
Copyright © 2011-2022 走看看