因为公司的业务是前后端分离,web前端和后端接口域名不同,所以存在跨域问题,开始使用的是jsonp解决,但是因为接口风格是rest的,还有delete、put等请求,jsonp就不够用了(涉及HTTP简单请求和复杂请求,这里有详细介绍),因此就找到了CORS跨域解决方案。原理过长,所以本篇文章只写服务端代码实现部分。

代码实现

app/Http/Middleware 里新建一个CorsMiddleware.php,并写入如下代码:


<?php
/*
* Author:xx_lufei
* Time:2016年11月3日13:15:51
* Note:Access Control Headers.
*/ namespace App\Http\Middleware; use Illuminate\Http\Request;
use Illuminate\Http\Response; class CorsMiddleware
{
private $headers;
private $allow_origin; public function handle(Request $request, \Closure $next)
{
$this->headers = [
'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE',
'Access-Control-Allow-Headers' => $request->header('Access-Control-Request-Headers'),
'Access-Control-Allow-Credentials' => 'true',//允许客户端发送cookie
'Access-Control-Max-Age' => 1728000 //该字段可选,用来指定本次预检请求的有效期,在此期间,不用发出另一条预检请求。
]; $this->allow_origin = [
'http://localhost',
'http://192.168.1.12:8080'
];
$origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : ''; //如果origin不在允许列表内,直接返回403
if (!in_array($origin, $this->allow_origin) && !empty($origin))
return new Response('Forbidden', 403);
//如果是复杂请求,先返回一个200,并allow该origin
if ($request->isMethod('options'))
return $this->setCorsHeaders(new Response('OK', 200), $origin);
//如果是简单请求或者非跨域请求,则照常设置header
$response = $next($request);
$methodVariable = array($response, 'header');
//这个判断是因为在开启session全局中间件之后,频繁的报header方法不存在,所以加上这个判断,存在header方法时才进行header的设置
if (is_callable($methodVariable, false, $callable_name)) {
return $this->setCorsHeaders($response, $origin);
}
return $response;
} /**
* @param $response
* @return mixed
*/
public function setCorsHeaders($response, $origin)
{
foreach ($this->headers as $key => $value) {
$response->header($key, $value);
}
if (in_array($origin, $this->allow_origin)) {
$response->header('Access-Control-Allow-Origin', $origin);
} else {
$response->header('Access-Control-Allow-Origin', '');
}
return $response;
}
}

通过数组的形式实现允许多个origin。

boostrap/app.php 里注册一下全局中间件即可完成


$app->middleware([
\App\Http\Middleware\CorsMiddleware::class,
]);

注意

默认情况下,cookie是不包括在CORS请求中的,如果服务器要接受cookie,必须设置


'Access-Control-Allow-Credentials'=> 'true'

如果不需要cookie,则必须删除该字段,改false是没用的,这个值只能是true。

如果是更复杂的业务需求,可以把method提出来做相应的逻辑判断。

与JSONP的比较

CORS与JSONP的使用目的相同,但是比JSONP更强大。

JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

原文地址:https://www.jianshu.com/p/ce6a14a4a270

lumen使用CORS解决跨域问题的更多相关文章

  1. 一步一步学习SignalR进行实时通信_3_通过CORS解决跨域

    原文:一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 一步一步学习SignalR进行实时通信\_3_通过CORS解决跨域 SignalR 一步一步学习SignalR进行实时通信_3_ ...

  2. Spring Boot中通过CORS解决跨域问题

    今天和小伙伴们来聊一聊通过CORS解决跨域问题. 同源策略 很多人对跨域有一种误解,以为这是前端的事,和后端没关系,其实不是这样的,说到跨域,就不得不说说浏览器的同源策略. 同源策略是由Netscap ...

  3. Django使用jsonp和cors解决跨域请求问题

    1.使用jsonp的方式解决跨域请求的问题 我启动两个django项目,然后使用的端口不一样,在项目1中通过ajax发请求给项目2,然后接受项目2发送过来的数据 先看项目1的ajax的代码 $(&qu ...

  4. 使用cors解决跨域遇到浏览器发出options嗅探

    前言: 本地开发起的服务器,通过修改hosts文件设置域名映射到本地,接口在测试环境 1. 服务器端设置cors, 配置access-control-allow-origin 头部 使用蚂蚁金服的up ...

  5. 配置CORS解决跨域调用—反思思考问题的方式

    导读:最近都在用一套完整的Java EE的体系做系统,之前都是用spring框架,现在弄这个Java EE,觉得新鲜又刺激.但,由于之前没有过多的研究和使用,在应用的过程中,也出现了不少的问题.累积了 ...

  6. Spring Boot2 系列教程(十四)CORS 解决跨域问题

    今天和小伙伴们来聊一聊通过CORS解决跨域问题. 同源策略 很多人对跨域有一种误解,以为这是前端的事,和后端没关系,其实不是这样的,说到跨域,就不得不说说浏览器的同源策略. 同源策略是由 Netsca ...

  7. 服务端 CORS 解决跨域

    当协议.域名.端口中任一个不同时产生跨域 CORS 跨域资源共享(Cross-origin resource sharing) 参考资料https://developer.mozilla.org/zh ...

  8. 14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...

  9. Web API中使用CORS解决跨域

    Web API中使用Cros解决跨域 如果两个页面的协议,端口和域名都相同,则两个页面具有相同的源,注:IE不考虑端口,同源策略不会阻止浏览器发送请求,但是它会阻止应用程序看到响应.如下图所示 COR ...

随机推荐

  1. mint-ui loadmore 上拉加载的坑

    <div style="height:100vh;overflow: scroll;"> <mt-loadmore :top-method="loadT ...

  2. <小白学技术>将python脚本导出为exe可执行程序

    1.简介(为啥需要导出为exe可执行程序) python写完的程序靠命令来执行,显得太专业,不符合python简单的特点(好吧,主要是太low) 代码给别人执行,别人没有你的python库也没法用(双 ...

  3. Input:type属性

    1.button:定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本). <input id="" type="button" name= ...

  4. 语音识别(语音转文字)&& 语音合成(文字转语音)

    [语音合成API]SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等 // 语音播报 s ...

  5. Luogu P3802 小魔女帕琪(期望)

    P3802 小魔女帕琪 题意 题目背景 从前有一个聪明的小魔女帕琪,兴趣是狩猎吸血鬼. 帕琪能熟练使用七种属性(金.木.水.火.土.日.月)的魔法,除了能使用这么多种属性魔法外,她还能将两种以上属性组 ...

  6. LoadRunner穿过防火墙运行Vuser和进行监控

    LoadRunner穿过防火墙运行Vuser和进行监控   LoadRunner穿过防火墙进行测试,总结下来是2个方法:1. 在controller和Vuser的LAN中的防火墙都打开54345端口即 ...

  7. Spring Boot 配置 Security 密码加密

    依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spri ...

  8. Mac配置maven环境命令

    1.安装:解压下载好的maven的文件,解压到你想要的文件夹底下. 2.配置 1)打开终端输入命令 vim ~/.bash_profile (编辑环境变量配置文件) 2)按下i,进入编辑模式 3)在环 ...

  9. MySQL操作表和表记录

    目录 操作表 增 列约束 列类型 删 改 修改表名 增加字段 修改字段 删除字段 查 复制表结构 操作表数据 增 删 改 查 操作表 增 创建表语法 创建一个表,多个字段: create table ...

  10. Javascript简单算法

    1.多维数组取其所有第几个值组成新数组 例如 [[, , ], [, , ], [, , ]],我要标红的值 [[1, 3, 5], [2, 2, 2], [3, 3, 3]] let t = [[1 ...