Yii2 Vue 跨域问题 | 全力以赴

旧的解决办法

在控制器的 behaviors 方法中增加下面的代码：

public function behaviors()
{
    $behaviors = parent::behaviors();
    if (YII_ENV_DEV) {
        // add CORS filter
        $behaviors['corsFilter'] = [
            'class' => Cors::class,
            'cors' => [
                'Origin' => ['http://localhost:8080'],
                'Access-Control-Request-Method' => ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'],
                'Access-Control-Request-Headers' => ['*'],
                'Access-Control-Allow-Credentials' => true,
                'Access-Control-Max-Age' => 86400,
                'Access-Control-Expose-Headers' => [],
            ],
        ];
    }

    return $behaviors;
}

上边配置的解释：

Origin 即 Access-Control-Allow-Origin 表示：响应头指定了该响应的资源是否被允许与给定的 origin 共享。
Access-Control-Request-Method 用于通知服务器在真正的请求中会采用哪种 HTTP 方法。因为预检请求所使用的方法总是 OPTIONS ，与实际请求所使用的方法不一样，所以这个请求头是必要的。
Access-Control-Request-Headers 用于通知服务器在真正的请求中会采用哪些请求头。
Access-Control-Allow-Credentials 表示是否可以将对请求的响应暴露给页面。返回 true 则可以，其他值均不可以。
Access-Control-Max-Age 表示返回结果（即 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 提供的信息）可以被缓存多久。
Access-Control-Expose-Headers 列出了哪些首部可以作为响应的一部分暴露给外部。

注意：

如果设置 Origin 为 ['*']，即所有的前端跨域请求可以接受，同时把 Access-Control-Allow-Credentials 设置为 true，Yii 会直接报错：**Allowing credentials for wildcard origins is insecure. Please specify more restrictive origins or set ‘credentials’ to false in your CORS configuration.**。

告诉你使用通配符的凭证是不安全的，让你设置更严格的 Origin 或者把 Access-Control-Allow-Credentials 设置为 false。

也就是说不能 Access-Control-Allow-Credentials 为 true 并且 Access-Control-Allow-Origin 为 *。

因为 Access-Control-Allow-Credentials 的意思就是允许跨域请求在请求头中携带凭证，比如 cookie，做身份识别，但是你又把 Access-Control-Allow-Origin 设置为 *，这是说不通的，是相悖的。

具体可参考：Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*‘ | mozilla

新的问题

上面的理论上解决了跨域问题，但是新版 Chrome 根据 Cookie 的 SameSite 属性，仍然会阻止 Cookie 的发送 network show filtered out request cookies。

参考：

在开发环境根治跨域问题，使用 webpack-dev-server 代理。

前端：abc.test
后端：abc-api.test
代理：abc.test/web-api -> abc-api.test

proxy: {
  '/web-api/': {
    target: 'http://abc-api.test/',
    pathRewrite: { '^/web-api': '' },
    changeOrigin: true, // 默认情况下，代理时会保留主机头的来源，您可以将 changeOrigin 设置为true 来覆盖此行为。
    secure: false, // 接受在 HTTPS 上运行带有无效证书的后端服务器。
  },
}

参考：dev-server devserverproxy | webpack

是否可以 jwt 来解决待研究。

References

– EOF –