Yii2框架的前后端分离的跨域CORS问题处理

  •   
  • 3765
  • PHP
  • 0
  • super_dodo
  • 2020/10/15

最近处理的一个项目是Yii2+vue的项目,原先的时候是吧前端项目放在后端代码的public目录下面,放在同一个目录下面的话是不会存在跨域相关的问题。

现在根据产品的需要和规划,要把前端项目打包后独立出来

API接口后端的独立域名
https://api.dodobook.net

前端Web端的域名独立如下
https://web.dodobook.net

现在需要在前端不项目去跨域请求API接口

直接访问的时候会出现大量的CORS相关的跨域报错例如
Access to XMLHttpRequest at 'http://www.dodobook.me/comm/test-ajax?hello=dodo'
from origin 'http://www.dodobook.cc' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

试了好几种方式,改nginx,改代码等方式都未果,也可能是自己某些方面疏忽踩坑。

现在贴出来现在的处理方式.直接在API接口的基类里面修改实现

namespace app\components;

use Yii;
use yii\web\Controller;
use yii\helpers\Json;

/**
*基础类
*所有的接口层都会继承BaseController
*/
class BaseController extends Controller{

public function __construct($id, $module, $config = []){
header("Access-Control-Allow-Origin:*");  //https 不可以用</em>号通配符
header('Access-Control-Allow-Headers:Origin,Content-Type,Cookie,X-CSRF-TOKEN,Accept,Authorization,X-XSRF-TOKEN,timestamp,lang,sign,dodo');
header('Access-Control-Expose-Headers:Authorization,authenticated');
header('Access-Control-Allow-Methods:GET,POST,PUT,OPTIONS,PATCH,DELETE,HEAD');
header('Access-Control-Allow-Credentials:true');
parent::__construct($id, $module, $config);
}

public $pageSize = '20';
public $pageTitle = '';
}

参考文章: http://www.ruanyifeng.com/blog/2016/04/cors.html

yii\filters\Cors

跨域资源共享 CORS 机制允许一个网页的许多资源(例如字体、JavaScript等) 这些资源可以通过其他域名访问获取。 特别是JavaScript's AJAX 调用可使用 XMLHttpRequest 机制,由于同源安全策略该跨域请求会被网页浏览器禁止. CORS定义浏览器和服务器交互时哪些跨域请求允许和禁止。

yii\filters\Cors 应在 授权 / 认证 过滤器之前定义,以保证CORS头部被发送。

use yii\filters\Cors;
use yii\helpers\ArrayHelper;

public function behaviors()
{
return ArrayHelper::merge([
[
'class' => Cors::className(),
'cors' => [
'Origin' => ['http://www.myserver.net'],
'Access-Control-Request-Method' => ['GET', 'HEAD', 'OPTIONS'],
],
],
], parent::behaviors());
}

过滤器的方式应该更专业一些。