原创：【ajax | axios跨域简单请求+复杂请求】自定义header头Token请求Laravel5后台【亲测可用】

时间：2024-03-08 16:17:22

如标题：我想在ajax的header头增加自定义Token进行跨域api认证并调用，api使用laravel5编写，如何实现？

首先，了解下CORS简单请求和复杂请求。

　　　　 -- CORS简单请求 --

链接：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

 

 

 

1、ajax跨域，使用CORS方式  --  （ajax跨域会自动提交origin字段，用户不可伪造）

2、HTML的js：

</body>
<script type="text/javascript">
    $(function(){
        $(document).on("click", ".btn-all2", function(){
            $.ajax({
                url:"http://t-local.*****.com/wechat/auth/up?call_back=http%3A%2F%2Ftest.*****.com%2Findex.php%3Fg%3DWeixin%26m%3DWeixin%26a%3Dindex",
                dataType:"json",
                type:"get", //origin字段不允许自定义伪造；跨域请求浏览器自动带上origin

                // 允许携带cookie凭证
                xhrFields: { withCredentials: true },
                // 允许跨域
                crossDomain: true,

                success:function(data){
                    console.log(\'success\');
                    console.log(JSON.stringify(data));
                },
                error: function(data){
                    console.log(\'error\');
                    console.log(JSON.stringify(data));
                }
            })
        })
    })
</script>
</html>

laravel5后台ajax请求过滤中间件： -- laravel 5 用来处理【简单请求】或者【复杂请求的第二次请求】

//跨域XML请求，会自动带上http_origin字段
public function handle( $request, Closure $next )
    {
        $origin = isset($_SERVER[\'HTTP_ORIGIN\'])? $_SERVER[\'HTTP_ORIGIN\'] : \'\';
        $allow_origin = Config::get(\'app.allow_origin\');
        $allow_origin_dynamic = Config::get(\'app.allow_origin_dynamic\');


        $allowOrigin = false;
        if ( in_array( $origin, $allow_origin ))
        {
            $allowOrigin = true;
        } else {
            foreach ( $allow_origin_dynamic as $item )
            {
                if ( strpos( $origin, $item ) !== false )
                {
                    $allowOrigin = true;
                    break;
                }
            }
        }
        if ( $allowOrigin )
        {
            header(\'Access-Control-Allow-Origin: \'.$origin);
            header(\'Access-Control-Allow-Methods:POST,GET,OPTIONS,PUT,DELETE\');
            header(\'Access-Control-Allow-Headers:x-requested-with,content-type\');
            header(\'Access-Control-Allow-Credentials:true\');
        }
        return $next($request);

    }

 

 

　　　　------  CORS复杂请求   --------

链接：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

 

复杂请求 =【预请求 + 简单请求】；

一次XMLHttpRequest会发送两次请求，一次options、一次自定义的请求

那么在TP5中，我们可以使用行为扩展处理ajax|axios 带自定义头token的CORS请求，在laravel5中怎样解决呢？

laravel5 解决方案：

1、域名一：local.domian.com前端发起跨域ajax请求：访问laravel5的t-local.domian.com域名二

<script type="text/javascript">
    $(function(){
        $(document).on("click", ".btn-all2", function(){
            $.ajax({
                url:"http://t-local.****.com/api/wechat/auth/up?call_back=http%3A%2F%2Ftest.****.com%2Findex.php%3Fg%3DWeixin%26m%3DWeixin%26a%3Dindex",
                dataType:"json",
                type:"get", 

                //origin字段不允许自定义伪造；跨域请求浏览器自动带上origin


                //自定义请求头认证token
                headers: { \'token\' : "2211zxz" },

                // 允许携带cookie凭证
                xhrFields: { withCredentials: true },
                // 允许跨域
                crossDomain: true,

                success:function(data){
                    console.log(\'success\');
                    console.log(JSON.stringify(data));
                },
                error: function(data){
                    console.log(\'error\');
                    console.log(JSON.stringify(data));
                }
            })
        })
    })
</script>

 

2、在laravel的route/api.php路由文件，增加以下路由规则：

/**
* laravel5发送复杂cors请求，类似jwt、自定义请求头token等，会先发送预请求options
* @param : 预请求options的【Access-Control-Allow-Origin:】绝对不可以设置成*，否则报错
* @return : code 200
* date: 2019年10月30日下午2:29:50
* author: xzz
*/
Route::options(\'/{all}\',function () {
    //file_put_contents(storage_path(\'logs/SERVER_Header.txt\'), \'array = \' . var_export(request()->header(), true) . PHP_EOL, FILE_APPEND);
    //file_put_contents(storage_path(\'logs/SERVER_Header.txt\'), \'string\' . var_export(request()->header(\'ORIGIN\'), true) . PHP_EOL, FILE_APPEND);
    $origin = request()->header(\'ORIGIN\')??request()->header(\'HTTP_ORIGIN\');
    
    header("Access-Control-Allow-Origin: $origin");
    header("Access-Control-Allow-Credentials: true");
    header(\'Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE\');
    header(\'Access-Control-Allow-Headers: Origin, Access-Control-Request-Headers, SERVER_NAME, Access-Control-Allow-Headers, cache-control, token, X-Requested-With, Content-Type, Accept, Connection, User-Agent\');
})->where([\'all\' => \'([a-zA-Z0-9-]|/)*\']);

 

3、返回前端F12打开，发现options请求已通过：

 

 

4、在创建一个【ajax简单请求】验证中间件（如果是简单请求，上面都可以省略），App\Middleware\AjaxHeader.php，kernel.php注册在api里面

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Support\Facades\{Config};

class AjaxHeader
{
    /**
     * @param $request
     * @param Closure $next
     * @return mixed
     */
    public function handle( $request, Closure $next )
    {
        file_put_contents(storage_path(\'logs/1.txt\'), var_export($_SERVER, true) . PHP_EOL, FILE_APPEND);
        file_put_contents(storage_path(\'logs/SERVER_HeaderReal.txt\'), \'array = \' . var_export(request()->header(), true) . PHP_EOL, FILE_APPEND);
        file_put_contents(storage_path(\'logs/SERVER_HeaderReal.txt\'), \'string\' . var_export(request()->header(\'ORIGIN\'), true) . PHP_EOL, FILE_APPEND);
        
        $origin = isset($_SERVER[\'HTTP_ORIGIN\'])? $_SERVER[\'HTTP_ORIGIN\'] : \'\';
        $allow_origin = Config::get(\'app.allow_origin\');
        $allow_origin_dynamic = Config::get(\'app.allow_origin_dynamic\');


        $allowOrigin = false;
        if ( in_array( $origin, $allow_origin ))
        {
            $allowOrigin = true;
        } else {
            foreach ( $allow_origin_dynamic as $item )
            {
                if ( strpos( $origin, $item ) !== false )
                {
                    $allowOrigin = true;
                    break;
                }
            }
        }
        if ( $allowOrigin )
        {
            header(\'Access-Control-Allow-Origin: \'.$origin);
            header(\'Access-Control-Allow-Methods:POST,GET,OPTIONS,PUT,DELETE\');
            header(\'Access-Control-Allow-Headers:x-requested-with,content-type,token\');
            header(\'Access-Control-Allow-Credentials:true\');
        }
        return $next($request);
/*        return $next($request)-> header(\'Access-Control-Allow-Origin\', \'*\')
        -> header(\'Access-Control-Allow-Methods\', \'POST,GET,OPTIONS,PUT,DELETE\')
        -> header(\'Access-Control-Allow-Headers\', \'Content-Type,Accept,Authorization,X-Requested-With\');*/
    }
}

 

5、上面注册的api中间件绑定到t-local的api/wechat/xxx路由上，从local域名发起访问t-local域名，发现get请求也成功返回了json数据

 

 

返回的json数据：数据正确返回了，至于返回的是什么，这已经不重要了，不是吗？！！

 

 

 

6、至此，则完成了laravel5 处理ajax 携带自定义header头Token，并发起的跨域CORS的复杂请求。

 

相关文章