lumen cors middleware 通过中间件 跨域

6 篇文章 0 订阅
2 篇文章 0 订阅

注意: 
1.前端ajax访问时要加上 xhrFields: {withCredentials: true} ,实现session可以传递; 
2.配置CORS,header("Access-Control-Allow-Origin",  "*"),实现跨域访问问题; 
3.配置CORS,header("Access-Control-Allow-Credentials", "true"),实现session传值问题;* 
4.配置CORS,如果配置了Access-Control-Allow-Credentials=true,则跨域拦截Access-Control-Allow-Origin 必须是指定的urlresponse.setHeader(“Access-Control-Allow-Origin”, url);

 

前端请求示例:

$.cookie("etsessionid", "xxxxxx", {path:"/", domain:".xxx.com"})
var jqxhr = $.ajax({
	type:'GET',
	url: "https://xxx.xxx.com/api/my/userinfo/getuserinfo/",
	xhrFields:{
		withCredentials: true,
	},
	crossDomain: true,
	async:true
}).done(function(data) {
	console.log(data)
})

 

使用这个组件实现跨域 CORS

https://packagist.org/packages/barryvdh/laravel-cors

Lumen

On Laravel Lumen, load your configuration file manually in bootstrap/app.php:

$app->configure('cors');

And register the ServiceProvider:

$app->register(Barryvdh\Cors\ServiceProvider::class);

Global usage for Lumen

To allow CORS for all your routes, add the HandleCors middleware to the global middleware:

$app->middleware([
    // ...
    \Barryvdh\Cors\HandleCors::class,
]);

Group middleware for Lumen

If you want to allow CORS on a specific middleware group or route, add the HandleCors middleware to your group:

$app->routeMiddleware([
    // ...
    'cors' => \Barryvdh\Cors\HandleCors::class,
]);

创建配置文件 .\config\cors.php  lumen没有config目录需要自己创建

return [
     /*
     |--------------------------------------------------------------------------
     | Laravel CORS
     |--------------------------------------------------------------------------
     |
     | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
     | to accept any value.
     |
     */
    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedHeaders' => ['Content-Type', 'X-Requested-With'],
    'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT',  'DELETE']
    'exposedHeaders' => [],
    'maxAge' => 0,
]

* 测试跨域

  (略)...

下面的这个跨域中间件header输出的位置不好,laravel/lumen生命周期 需要确认一下。

单元测试报错 http响应 500

        // Cannot modify header information - headers already sent by
        // (output started at .\vendor\phpunit\phpunit\src\Util\Printer.php:109)
        // error_reporting(E_ERROR | E_PARSE);

-----------------------------------------------------------------------------------------------------------------------

* 创建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-Credentials' => '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

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

  端口号不同

* 浏览器访问

http://www.mediamix.cn:8080/

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:

使用laravel-cors组件

https://segmentfault.com/a/1190000008445102

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fareast_mzh

打赏个金币

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值