In Yii2, when the server is abnormal, it does not respond to 500, but prompts in the browser: CORS error
1. In yii2, when the server is abnormal, it does not respond to 500, but prompts in the browser: CORS error, which leads to user experience, the front end has been loaded all the time. The prompts in the console are as follows, as shown in Figure 1
Figure 1
Access to XMLHttpRequest at 'https://api.apply.local/convention-free-field/get-search-condition-fields-by-convention-id' from origin 'https://console.apply.local' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'https://console.apply.local, *', but only one is allowed.
2. The existing logic is in the browser, the front-end requests the back-end API through JS. Therefore, to prevent CORS problems, the backend is implemented as follows
public static function setAllowOrigin()
{
$httpOrigin = $_SERVER['HTTP_ORIGIN'] ?? '';
Yii::debug('OPTION CHECK: ' . $httpOrigin);
if (
in_array($httpOrigin, [
//
'http://console.apply.local',
'https://console.apply.local',
'http://tougao.apply.local',
'https://tougao.apply.local',
'http://apply.local',
'https://apply.local',
'http://official.local',
'http://localhost:8080',
'http://localhost:8081',
'http://localhost:8082',
'http://localhost:8083',
'http://localhost:8084',
//正式域名
])
) {
\Yii::$app->response->headers->add('Access-Control-Allow-Origin', $httpOrigin);
\Yii::$app->response->headers->add('Access-Control-Allow-Headers', '*');
}
}
self::setAllowOrigin();
3. Carefully analyze the response header of the request, access-control-allow-origin: *, overwrite the access-control-allow-origin set in the setAllowOrigin method:https://console.apply.local。as shown in Figure 2
Figure 2
4. Decide to comment out all the method of setAllowOrigin in the second step, and avoid a large number of comments self::setAllowOrigin();
public static function setAllowOrigin()
{
// $httpOrigin = $_SERVER['HTTP_ORIGIN'] ?? '';
// Yii::debug('OPTION CHECK: ' . $httpOrigin);
// if (
// in_array($httpOrigin, [
// //
// 'http://console.apply.local',
// 'https://console.apply.local',
// 'http://tougao.apply.local',
// 'https://tougao.apply.local',
// 'http://apply.local',
// 'https://apply.local',
// 'http://official.local',
// 'http://localhost:8080',
// 'http://localhost:8081',
// 'http://localhost:8082',
// 'http://localhost:8083',
// 'http://localhost:8084',
// //正式域名
// ])
// ) {
// \Yii::$app->response->headers->add('Access-Control-Allow-Origin', $httpOrigin);
// \Yii::$app->response->headers->add('Access-Control-Allow-Headers', '*');
// }
}
self::setAllowOrigin();
5. Centralized configuration in the base classes of all API controllers
public function behaviors()
{
$behaviors = parent::behaviors();
$behaviors['corsFilter'] = [
'class' => Cors::class,
'cors' => [
'Origin' => [
//
'http://console.apply.local',
'https://console.apply.local',
'http://tougao.apply.local',
'https://tougao.apply.local',
'http://apply.local',
'https://apply.local',
'http://official.local',
'http://localhost:8080',
'http://localhost:8081',
'http://localhost:8082',
'http://localhost:8083',
'http://localhost:8084',
//正式域名
],
'Access-Control-Allow-Headers' => ['*'],
],
];
return $behaviors;
}
6. When the server is abnormal, it is not prompted in the browser: CORS error. Rather normal response, as expected. as shown in Figure 3
Figure 3
7. Check the response header, access-control-allow-origin:https://console.apply.local. in line with expectations. as shown in Figure 4
Figure 4
8. When the URL of the current end is not in the configuration item of origin, it prompts: CORS is wrong, which is in line with expectations.
Access to XMLHttpRequest at 'https://api.apply.local/convention-free-field/get-search-condition-fields-by-convention-id' from origin 'https://console.apply.local' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
