lumen 跨域问题解决方法 二
步骤
- 新建一个中间件
在app/http/middlemare中新建一个CorsMiddleware.php
- 书写中间件内容
<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Response;
class CorsMiddleware
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
$headers = [
'Access-Control-Allow-Origin' => getenv('ACCESS_CONTROL_ALLOW_ORIGIN'),
'Access-Control-Allow-Methods' => getenv('ACCESS_CONTROL_ALLOW_METHODS'),
'Access-Control-Allow-Credentials' => 'true',
'Access-Control-Max-Age' => '86400',
'Access-Control-Allow-Headers' => 'Content-Type, Authorization, X-Requested-With'
];
if ($request->isMethod('OPTIONS')) {
return response()->json('{"method":"OPTIONS"}', 200, $headers);
}
$response = $next($request);
foreach ($headers as $key => $value) {
$response->header($key, $value);
}
return $response;
}
}
- 在.env文件中自定义允许的请求头
#跨域请求参数
ACCESS_CONTROL_ALLOW_ORIGIN=*
ACCESS_CONTROL_ALLOW_METHODS='GET, POST, PUT, DELETE, OPTIONS'
- 然后在内核文件注册该中间件 【ps:在bootstrap中的app.php中把相应的注释去掉 并修改成现在这个新建的中间件就可以了】
$app->middleware([
App\Http\Middleware\CorsMiddleware::class
]);
请求页面代码:
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$.ajax({
type: "POST",//或者"POST"
url: "http://localhost:8000/api/login",//请求地址
data: {'phone':13522474350,'password':123},//传入后台的参数
// dataType: "JSONP",
success: function(data){
console.log(data);
}//回调函数,请求成功后执行的函数,data为后台传来的数据
});
});
</script>