Yii2后端对接React前端遇CORS及URL配置错误求助

一、先解决CORS跨域错误 #

核心问题是CORS响应缺少Access-Control-Allow-Origin头，按官方文档配置未生效大概率是过滤器顺序或配置项有误，按以下步骤调整：

1. 控制器中正确配置Cors过滤器（关键：顺序优先于身份验证） #

在登录控制器（比如UserController）的behaviors()方法中，确保Cors过滤器先于身份验证过滤器执行，同时正确配置允许的源、方法：

public function behaviors()
{
    $behaviors = parent::behaviors();

    // 配置CORS过滤器
    $behaviors['corsFilter'] = [
        'class' => \yii\filters\Cors::class,
        'cors' => [
            // 替换为你的React前端地址，例如http://localhost:3000
            'Origin' => ['http://localhost:3000'],
            // 必须包含OPTIONS，用于浏览器预请求
            'Access-Control-Request-Method' => ['GET', 'POST', 'OPTIONS'],
            'Access-Control-Request-Headers' => ['*'],
            // 若需跨域传递Cookie（如登录会话），设为true
            'Access-Control-Allow-Credentials' => true,
            'Access-Control-Max-Age' => 3600, // 预请求缓存时长
        ],
    ];

    // 若控制器启用了身份验证过滤器，调整顺序并排除OPTIONS请求
    if (isset($behaviors['authenticator'])) {
        $behaviors['authenticator']['except'] = ['options'];
        // 将Cors过滤器移至最前，确保先处理跨域预请求
        $behaviors = array_merge(['corsFilter' => $behaviors['corsFilter']], $behaviors);
    }

    return $behaviors;
}

2. 确保OPTIONS请求不被拦截 #

Yii2默认会将OPTIONS请求路由到对应动作，只要控制器动作（如actionLogin）未禁用OPTIONS方法，或在身份验证过滤器的except中排除了options动作，就不会被拦截。

二、解决URL规则的Unknown Property异常（yii\web\UrlRule::POST不存在） #

你修改urlManager时错误使用了POST属性，Yii2的UrlRule类无此属性，正确写法是用verb指定允许的请求方法：

错误写法（触发异常）： #

// web.php中的urlManager配置
'urlManager' => [
    'enablePrettyUrl' => true,
    'enableStrictParsing' => true,
    'showScriptName' => false,
    'rules' => [
        [
            'class' => 'yii\web\UrlRule',
            'pattern' => 'api/login',
            'route' => 'user/login',
            'POST' => true, // UrlRule无此属性，导致异常
        ],
    ],
],

正确写法（二选一）： #

方式1：简化规则写法

'rules' => [
    'POST api/login' => 'user/login',
],

方式2：完整UrlRule配置

'rules' => [
    [
        'class' => 'yii\web\UrlRule',
        'pattern' => 'api/login',
        'route' => 'user/login',
        'verb' => ['POST'], // 用verb属性指定允许的请求方法
    ],
],

三、React请求代码调整（可选，若需传递Cookie） #

若登录需保留会话Cookie，请求时需添加credentials: 'include'：

fetch('http://你的Yii2后端地址/api/login', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    credentials: 'include', // 跨域传递Cookie
    body: JSON.stringify({
        username: '你的用户名',
        password: '你的密码',
    }),
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

验证步骤 #

1. 重启Yii2后端服务
2. 打开浏览器控制台，查看登录请求的响应头，确认存在Access-Control-Allow-Origin且值为你的前端地址
3. 测试api/login的POST请求，确认能正确路由到user/login动作

内容的提问来源于stack exchange，提问作者mightycode Newton