`

ElementUI上传组件在Lumen环境下跨域问题的解决

 
阅读更多
在后台的路由中间件中要增加跨域设置:
namespace App\Http\Middleware;

//跨域中间件
class BeforeCorsMiddleware {
	/**
	 * Handle an incoming request.
	 *
	 * @param  \Illuminate\Http\Request  $request
	 * @param  \Closure  $next
	 * @return mixed
	 */
	public function handle($request, \Closure $next)
	{
	    app('log')->debug(json_encode($request->all()));
		header('Access-Control-Allow-Origin:*'); //允许地址访问
		header('Access-Control-Allow-Methods:GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS'); //允许的方法
		header('Access-Control-Allow-Headers:Origin,Access-Control-Allow-Origin,x_requested_with,Content-Type, Content-Length, Authorization, Accept, X-Requested-With, Current-Page'); //允许的参数

		return $next($request);
	}
} 


此外,Upload组件上传文件是使用复杂请求实现的,因此请求后台时,会先发起一个Options请求,然后在Post。如果路由表中没有针对Options方法的配置,只有Post方法,会导致Options方法失败,抛出MethodNotAllowedHttpException错误,浏览器将自动忽略后续的Post方法。因此需要在路由下增加一个通用的Options地址路由(可根据实际情况调整匹配范围):
$router->group(['middleware' => ['cors']], function ($router) {
$router->options('/{a}' , function () {
        return 'ok';
    });
});

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics