* 创建CORS中间件文件
.\app\Http\Middleware\CorsMiddleware.php
<?php
/**
* Created by PhpStorm.
* User: mingzhanghui
* Date: 2018/8/29
* Time: 9:09
*/
namespace app\Http\Middleware;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Closure;
class CorsMiddleware {
private $headers;
private $allowOrigin;
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle(Request $request, Closure $next) {
$this->headers = [
'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE',
'Access-Control-Allow-Headers' => 'x-requested-with,content-type',
'Access-Control-Allow-Credential' => true,
'Access-Control-Max-Age' => 1728000
];
$this->allowOrigin = [
'http://localhost',
'http://127.0.0.1',
'http://localhost:8080',
'http://127.0.0.1:8080',
'http://192.168.4.157:8080',
'http://www.mediamix.cn:8080'
];
$origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
if (!in_array($origin, $this->allowOrigin) && !empty($origin)) {
return new Response('Forbidden', 403);
}
if ($request->isMethod('options')) {
return $this->setCorsHeaders(new Response('OK', 200), $origin);
}
$this->headers['Access-Control-Allow-Origin'] = $origin;
foreach ($this->headers as $name => $value) {
header($name . ': '.$value);
}
return $next($request);
}
protected function setCorsHeaders(Response $response, $origin) {
foreach ($this->headers as $key=>$value) {
$response->header($key, $value);
}
$response->header('Access-Control-Allow-Origin',
in_array($origin, $this->allowOrigin) ? $origin : '');
return $response;
}
}* 注册中间件
.\bootstrap\app.php
/*
|--------------------------------------------------------------------------
| Register Middleware
|--------------------------------------------------------------------------
|
| Next, we will register the middleware with the application. These can
| be global middleware that run before and after each request into a
| route or middleware that'll be assigned to some specific routes.
|
*/
$app->middleware([
App\Http\Middleware\CorsMiddleware::class
// App\Http\Middleware\OldMiddleware::class
]);
$app->routeMiddleware([
'auth' => App\Http\Middleware\Authenticate::class,
'cors' => App\Http\Middleware\CorsMiddleware::class
]);* Controller
.\app\Http\Controllers\UserController.php
<?php
namespace App\Http\Controllers;
use App\User;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
class UserController extends Controller {
// ...
public function login(Request $request) {
$username = $request->input('username');
$password = $request->input('password');
return [
'username'=> $username,
'password' => $password
];
}
}* routes
.\routes\web.php
$router->post('user/login', 'UserController@login');* 前端
~\res\js\layui.config.js
layui.config({
base: '/res/js/modules/', //设定扩展的Layui模块的所在目录，一般用于外部模块扩展
version: false,
debug: true,
}).use('index'); //加载入口
window.CONTEXT_PATH = "http://127.0.0.1:8000";~\res\js\modules\index.js
扫描二维码关注公众号，回复：
3012766 查看本文章
layui.define(['login'], function(exports) {
exports("index", {});
});// ~\res\js\modules\login.js
layui.define(['form', 'upload'], function (exports) {
var form = layui.form, //获取form模块
upload = layui.upload, //获取upload模块
$ = layui.$;
var loginForm = document.forms.login;
loginForm.onsubmit = function(e) {
e.preventDefault();
};
var btn = document.getElementById("J_login");
btn.onclick = function() {
$.ajax({
type: 'POST',
url: window.CONTEXT_PATH + "/user/login",
// data: $(loginForm).serialize(),
data: {
username: loginForm.username.value,
password: loginForm.password.value
}
// dataType: 'json'
}).done(function(data) {
console.log(data);
});
};
exports('login', {});
});
html
<div class="layui-main container">
<form class="layui-form" action="" name="login">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button id="J_login" type="button" class="layui-btn" lay-submit lay-filter="login">登入</button>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="./layui/layui.js"></script>
<script src="./res/js/layui.config.js"></script>
* hosts
C:\Windows\System32\drivers\etc\hosts
127.0.0.1 www.mediamix.cn
127.0.0.1 mingzhanghui* 启动前端服务
E:\code\ui\layui-v2.3.0\layui-v2.3.0>php -S 0.0.0.0:8080
PHP 7.2.8 Development Server started at Wed Aug 29 11:02:54 2018
Listening on http://0.0.0.0:8080
Document root is E:\code\ui\layui-v2.3.0\layui-v2.3.0
Press Ctrl-C to quit.
* 后台服务
http://127.0.0.1:8000
端口号不同
* 浏览器访问
www.mediamix.cn 在hosts文件里设定IP 为127.0.0.1本机主机名
response：
{"username":"asdfads","password":"1234123"}
request：
到这里，跨域配置成功
* 测试反例
访问http://mingzhanghui:8080/ hosts文件里配置mingzhanghui IP地址也是本机127.0.0.1
Response: 403 Forbidden
说明执行到了中间件的代码
if (!in_array($origin, $this->allowOrigin) && !empty($origin)) {
return new Response('Forbidden', 403);
}* More：