资讯专栏INFORMATION COLUMN

Laravel 开启跨域功能

muzhuyu / 722人阅读

摘要:跨域的请求出于安全性的原因,浏览器会限制中的跨域请求。跨源共享标准需要浏览器和服务端共同配合才能完成,目前浏览器厂商已经可以将请求部分自动完成,所以跨源资源访问的重点还是在于服务器端。指明预请求或者跨域请求的来源。

跨域的请求

出于安全性的原因,浏览器会限制 Script 中的跨域请求。由于 XMLHttpRequest 遵循同源策略,所有使用 XMLHttpRequest 构造 HTTP 请求的应用只能访问自己的域名,如果需要构造跨域的请求,那么开发者需要配合浏览器做出一些允许跨域的配置。

W3C 应用工作组推荐了一种跨资源共享的机制,这种机制让 Web 应用服务器能支持跨站访问控制,从而使得安全的进行跨站数据传输成为可能,该机制通过几种方式来对原有模式进行了扩展:

响应的头部应该追加 Access-Control-Allow-Orign,用来表明哪些请求源被允许访问资源内容

浏览器会对请求源和响应中的值进行匹配验证

对于跨域的请求,浏览器会预发送一个非简单方式的请求,来判断给定资源是否准备接受跨域资源访问

服务端应用通过检查请求头部的 Orign 来判定请求是否跨域。

跨源资源共享标准

跨源资源共享标准通过新增一系列 HTTP 头,让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源。另外,对哪些会对服务器数据造成破坏性响应的 HTTP 请求方法(特别是 GET 以外的 HTTP 方法,或者搭配某些 MIME 类型的 POST 请求),标准强烈要求浏览器必须先以 OPTIONS 请求方式发送一个预请求(preflight request),从而获取知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许跨源请求的情况下,以实际的 HTTP 请求方法发送那个真正的请求。服务器端也可以通知客户端,是不是需要随同请求一起发送信用信息(包括 Cookies 和 HTTP 认证相关数据)。

跨源共享标准需要浏览器和服务端共同配合才能完成,目前浏览器厂商已经可以将请求部分自动完成,所以跨源资源访问的重点还是在于服务器端。

下面列出一些标准中可用的响应头和请求头。

Response Header

Access-Control-Allow-Origin : 指明哪些请求源被允许访问资源,值可以为 "*","null",或者单个源地址。

Access-Control-Allow-Credentials : 指明当请求中省略 creadentials 标识时响应是否暴露。对于预请求来说,它表明实际的请求中可以包含用户凭证。

Access-Control-Expose-Headers : 指明哪些头信息可以安全的暴露给 CORS API 规范的 API。

Access-Control-Max-Age : 指明预请求可以在预请求缓存中存放多久。

Access-Control-Allow-Methods : 对于预请求来说,哪些请求方式可以用于实际的请求。

Access-Control-Allow-Headers : 对于预请求来说,指明了哪些头信息可以用于实际的请求中。

Origin : 指明预请求或者跨域请求的来源。

Access-Control-Request-Method : 对于预请求来说,指明哪些预请求中的请求方式可以被用在实际的请求中。

Access-Control-Request-Headers : 指明预请求中的哪些头信息可以用于实际的请求中。

Request Header

Origin : 表明发送请求或预请求的来源。

Access-Control-Request-Method : 在发送预请求时带该请求头,表明实际的请求将使用的请求方式。

Access-Control-Request-Headers : 在发送预请求时带有该请求头,表明实际的请求将携带的请求头。

中间件

在 Laravel 中允许跨域请求,我们可以构建一个追加响应的中间件,用来添加专门处理跨域的请求的响应头:

header("Access-Control-Allow-Origin", config("app.allow"));
        $response->header("Access-Control-Allow-Headers", "Origin, Content-Type, Cookie, Accept");
        $response->header("Access-Control-Allow-Methods", "GET, POST, PATCH, PUT, OPTIONS");
        $response->header("Access-Control-Allow-Credentials", "true");
        return $response;
  }

}

其中有以下需要注意的地方:

对于跨域访问并需要伴随认证信息的请求,需要在 XMLHttpRequest 实例中指定 withCredentialstrue

这个中间件你可以根据自己的需求进行构建,如果需要在请求中伴随认证信息(包含 cookie,session)那么你就需要指定 Access-Control-Allow-Credentialstrue, 因为对于预请求来说如果你未指定该响应头,那么浏览器会直接忽略该响应。

在响应中指定 Access-Control-Allow-Credentialstrue 时,Access-Control-Allow-Origin 不能指定为 *

后置中间件只有在正常响应时才会被追加响应头,而如果出现异常,这时响应是不会经过中间件的。

PS: 欢迎关注简书 Laravel 专题,也欢迎 Laravel 相关文章的投稿 :),作者知识技能水平有限,如果你有更好的设计方案欢迎讨论交流,如果有错误的地方也请批评指正,在此表示感谢谢谢 :)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/21850.html

相关文章

  • 「新轮子」PHP CORS (Cross-origin resource sharing),解决 P

    摘要:而我的新轮子也并不是专门解决它的问题的,而是顺便解决而已。概述这个包,支持在所有的项目中使用。一旦出现成员,代表允许全部。列出允许跨域请求的方法列表,默认是代表所有方法。信息地址嗯,新轮子,求一波。 showImg(https://segmentfault.com/img/bV5VxN?w=844&h=656); 是的,可能了解 Laravel 的都知道,在 Laravel 中简单的设...

    lbool 评论0 收藏0
  • laravel记录

    摘要:开启跨域对于跨域访问并需要伴随认证信息的请求,需要在实例中指定为在响应中指定为时,不能指定为自定义命令命令生成文件这里是命令行调用的名字如这里的命令行调用的时候就是这里填写命令行的描述当执行 laravel开启跨域 //对于跨域访问并需要伴随认证信息的请求,需要在 XMLHttpRequest 实例中指定 withCredentials 为 true,在响应中指定 Access-Con...

    roland_reed 评论0 收藏0
  • Nginx入门到实战(2)场景实现篇

    摘要:上一章了解了的基础理论与配置,这一章将介绍在各种不同场景下的不同使用方法一静态资源服务静态资源类型非服务器动态运行生成的文件,换句话说,就是可以直接在服务器上找到对应文件的请求浏览器端渲染图片视频文件,任意下载文件静态资源服务场景什么是例 上一章了解了nginx的基础理论与配置,这一章将介绍nginx在各种不同场景下的不同使用方法 一、静态资源WEB服务 1.静态资源类型 非服务器动态...

    netmou 评论0 收藏0
  • 【日常填坑】之ajax请求laravel的api接口

    摘要:合适和够用是最完美的追求。比如从页面去请求的资源。它允许浏览器向跨源服务器,发出请求,从而克服了只能同源使用的限制。定义在中的路由都是无状态的,并且会应用中间件组。 关于作者 程序开发人员,不拘泥于语言与技术,目前主要从事PHP和前端开发,使用Laravel和VueJs,App端使用Apicloud混合式开发。合适和够用是最完美的追求。 个人网站:http://www.linganm...

    Arno 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<