摘要:说明测试使用的接口域名,多域名为和。设置多域名尝试直接通过的模块追加值实现,如下接口请求和响应头如下当前域为,需跨域请求的资源。故通过该方法不能设置多域名进行。
首发于 樊浩柏科学院
平常我们遇到跨域问题时,常使用 cors(Cross-origin resource sharin)方式解决。不知你是否注意到,在设置响应头 Access-Control-Allow-Origin 域的值时,只允许设置一个域名,这意味着不能同时设置多个域名来共享资源。而在 Yii2 中直接使用"Origin" => ["http://www.site1.com", "http://www.site2.com"]的形式却可以设置多个 cors 域名值,Why?
其实,Yii2 中采用了动态设置 Access-Control-Allow-Origin 域值的方法来解决这个问题。
说明:测试使用的接口域名api.d.fanhaobai.com,cros 多域名为www.d.yii.com和www.fq.yii.com。Nginx设置多域名
尝试直接通过 Nginx 的add_header模块追加 Access-Control-Allow-Origin 值实现,如下:
add_header Access-Control-Allow-Origin http://www.fq.yii.com; add_header Access-Control-Allow-Origin http://www.d.yii.com;
接口 请求 和 响应头 如下:
Response Headers Access-Control-Allow-Origin: http://www.fq.yii.com Access-Control-Allow-Origin: http://www.d.yii.com Connection: keep-alive Content-Type: application/json; charset=UTF-8 ... ... Request Headers Accept: */* Accept-Encoding: gzip, deflate Accept-Language: zh-CN,zh;q=0.8 Host: api.d.fanhaobai.com Origin: http://www.fq.yii.com Proxy-Connection: keep-alive ... ...
当前域为www.fq.yii.com,需跨域请求http://api.d.fanhaobai.com/v1/config/list.json的资源。浏览器抛出如下跨域错误:
XMLHttpRequest cannot load http://api.d.fanhaobai.com/v1/config/list.json. The "Access-Control-Allow-Origin" header contains multiple values "http://www.fq.yii.com, http://www.d.yii.com", but only one is allowed. Origin "http://www.fq.yii.com" is therefore not allowed access.
以上信息明确说明,Access-Control-Allow-Origin 只能设置为一个值,即每次请求只能对应一个域名值。故通过该方法不能设置多域名进行 cors。
Yii2设置多域名Yii2 设置多域名 cors,只需在对应控制器(ConfigController)中设置 cors 行为,如下:
class BaseController extends Controller { /** * @inheritdoc */ public function behaviors() { return [ "corsFilter" => [ "class" => yiifiltersCors::className(), "cors" => [ //运行cors域名列表 "Origin" => ["http://www.d.yii.com", "http://www.fq.yii.com"], "Access-Control-Allow-Credentials" => true, ] ], ]; } }
重新在www.fq.yii.com发送 cors 请求,发现此时已经不存在跨域问题。响应头 如下:
Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: http://www.fq.yii.com Connection: keep-alive Content-Type: application/json; charset=UTF-8 ... ...
我们会发现,Access-Control-Allow-Origin 域的值为http://www.fq.yii.com,刚好为当前域名一致,且只有一个值,并未出现设置的http://www.d.yii.com值。
同时,在www.d.yii.com下发送 cors 请求,也不存在跨域问题。响应头中 Access-Control-Allow-Origin 值为http://www.d.yii.com。
由此可知,Yii2 在控制器行为中设置 Origin 项,只是一个域名白名单,而返回的 Access-Control-Allow-Origin 同请求的域名一致且在这个白名单中,这个 Access-Control-Allow-Origin 由 Yii2 根据当前请求所在域名进行了动态处理。
Yii2动态Access-Control-Allow-Origin查看 Yii2 的yiifiltersCors类源码,如下:
class Cors extends ActionFilter { /** * @var array CORS所用的响应头 */ public $cors = [ "Origin" => ["*"], "Access-Control-Request-Method" => ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"], "Access-Control-Request-Headers" => ["*"], "Access-Control-Allow-Credentials" => null, "Access-Control-Max-Age" => 86400, "Access-Control-Expose-Headers" => [], ]; /** * 执行action前要做的事 * @inheritdoc */ public function beforeAction($action) { $this->request = $this->request ?: Yii::$app->getRequest(); $this->response = $this->response ?: Yii::$app->getResponse(); ... ... $requestCorsHeaders = $this->extractHeaders(); //获取cors所用的响应头 $responseCorsHeaders = $this->prepareHeaders($requestCorsHeaders); //设置cors所用的响应头 $this->addCorsHeaders($this->response, $responseCorsHeaders); return true; } /** * 处理cors所用的响应头,动态处理Access-Control-Allow-Origin域 * @param array $requestHeaders CORS headers we have detected * @return array CORS headers ready to be sent */ public function prepareHeaders($requestHeaders) { $responseHeaders = []; //$requestHeaders["Origin"]为源地址,请求所在域名 if (isset($requestHeaders["Origin"], $this->cors["Origin"])) { //源地址在白名单中,则设置Access-Control-Allow-Origin为源地址 if (in_array("*", $this->cors["Origin"]) || in_array($requestHeaders["Origin"], $this->cors["Origin"])) { $responseHeaders["Access-Control-Allow-Origin"] = $requestHeaders["Origin"]; } } ... ... } }
主要思想就是,查看源地址是否在 cors 白名单中,在则设置 Access-Control-Allow-Origin 域的值为源地址。这样就能满足 Access-Control-Allow-Origin 为一个值的限制,同时也能允许指定的域名进行 cors。
注意:使用该方法请确保 Nginx 配置中未操作 Access-Control-Allow-Origin 域。总结
通过 Nginx 设置 Access-Control-Allow-Origin 进行 cors,有且只能有一个特定域名,局限性较大。通过代码逻辑操作 Access-Control-Allow-Origin 来实现 cors,则比较灵活,能解决多个域名进行 cors 的需求,但是如果接口异常,跨域设置则会失效。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/29763.html
摘要:可是,我们的域名有这三个域名仅仅是不同的环境,因此,的跨域名访问就引出来了。无论是一二级域名,和不同域名下的跨域,无非要达到两点客户端访问同一个所有域名对应的服务器访问的的数据的位置必须一致。 关闭httponly引起的问题 场景1: 测试A:咦,为什么test环境登录不了呢? 程序员:清缓存。 测试B:握草,dev也登录不了。。。谁看看! 程序员:清缓存。 测试们:。。。唉 场景...
摘要:所以,虽然接口正确返回了,但是由于跨域限制取不到这个值。这个需要在中深层次跨域设置。第一个想到的就是在父级的中加入设置。找了半天,最后找到一个不是很完美的解决方案,就是在里边加入了跨域的设置。因为开发原则是尽量不要动包。 1.一般的跨域get和post,通过设置nginx就可以解决。在nginx.conf的http中加入以下代码即可 add_header Access-Control-...
摘要:而我的新轮子也并不是专门解决它的问题的,而是顺便解决而已。概述这个包,支持在所有的项目中使用。一旦出现成员,代表允许全部。列出允许跨域请求的方法列表,默认是代表所有方法。信息地址嗯,新轮子,求一波。 showImg(https://segmentfault.com/img/bV5VxN?w=844&h=656); 是的,可能了解 Laravel 的都知道,在 Laravel 中简单的设...
摘要:但是随着互联网的发展,同源策略严重影响了项目之间的连接尤其是大项目,有几个域名需要进行沟通的,标准推出了跨来源资源共享。 同源策略相信各位同学已然不陌生了,在这里不做过多阐述,简单介绍一下就好: URL 说明 是否允许 http://www.a.com/a.js / http://www.a.com/b.js 同一域名下 允许 http://www.a.com/la...
摘要:于是乎同源策略应运而生主要限制在于和无法读取。怎么绕过同源策略首先一般来说协议和端口造成的跨域问题大部分方法是没有办法绕过的。二级域名是寄存在主域名之下的域名。当主域名受到惩罚二级域名也会连带惩罚。 前言 这是一道前端跨不过躲不掉面试必备的知识,挣扎多年没能做到刻骨铭心深入脊髓,只能好好写篇博文记录起来了; 什么是跨域? 广义来说,A域执行的文档脚本试图去请求B域下的资源是不被允许的,...
阅读 2953·2021-09-23 11:32
阅读 2920·2021-09-22 15:12
阅读 1709·2019-08-30 14:07
阅读 3449·2019-08-29 16:59
阅读 1641·2019-08-29 11:11
阅读 2309·2019-08-26 13:50
阅读 2427·2019-08-26 13:49
阅读 2623·2019-08-26 11:49