• 如何实现跨域!


    前言:

    这里说的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等框架中有问题,需要用行为或者中间件来操作!
  • 相关阅读:
    vue-cli webpack 全局引用jquery
    ELK日志框架(2):log4net.ElasticSearch+ Kibana实现日志记录和显示
    ELK日志框架(1):安装Elasticsearch组建单服务器多节点集群
    about-php
    Win7系统下,docker构建nginx+php7环境实践
    Windows7安装 docker-compose的过程
    Windows下docker的安装以及遇到的问题
    crontab的笔试题随想
    composer在update时提示file could not be downloaded: SSL operation failed with code 1. OpenSSL Error messages: error:1407742E:SSL routines:SSL23_GET_SERVER_HELLO
    phpdocumentor 安装以及使用说明
  • 原文地址:https://www.cnblogs.com/teamemory/p/9828895.html
Copyright © 2020-2023  润新知