原创：【ajax | axios跨域简单请求+复杂请求】自定义header头Token请求Laravel5后台【亲测可用】
如标题：我想在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的复杂请求。
