Ошибка CORS в Yii2 — react?
При попытке авторизации возвращается данная ошибка. Как её исправить?
cess to XMLHttpRequest at 'localhost:8000/admin/admins/insert-popular' from origin 'localhost:3000' 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.
xhr.js:244 POST localhost:8000/admin/admins/insert-popular net::ERR_FAILED
Метод отправки запроса на клиентской стороне:
const handleLogin = () => {
const result = axios.post("http://localhost:8000/login/logins/login",{usernam...})
.then((result) =>{
console.log(result);
const token = result.data.token;
setToken(token);
localStorage.setItem("token",token);
}
).catch(
(error) => {
console.log(`Error: ${error} !!!!!!!!!!!!!!!!!!!!!!!!`);
}
)
};
Это контроллер принимает данные с клиентской части:
class LoginController extends Controller
{
public function actionLogin()
{
$request = Yii::$app->getRequest();
$username = $request->getBodyParam('username');
$password = $request->getBodyParam('password');
$user = User::findByUsername($username);
if (!$user) {
return ['error' => 'Нет такого пользователя!'];
}
if (!$user->validatePassword($password)) {
return ['error' => 'Неверный пароль!'];
}
$accessToken = Yii::$app->security->generateRandomString();
$token = Token::generateToken($user->username, md5($password), $accessToken);
return 'token: '.$accessToken;
}
}
В файл web.php я добавил это согласно рекомендации гугла
'response' => [
'class' => 'yiiwebResponse',
'on beforeSend' => function ($event) {
$response = $event->sender;
$response->headers->set('Access-Control-Allow-Origin', '*');
$response->headers->set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
$response->headers->set('Access-Control-Allow-Headers', 'Authorization, Content-Type');
$response->headers->set('Access-Control-Allow-Credentials', 'true');
},
],
Дополнительно:
Фрагменты кода надо размещать в виде текста и оборачивать тэгом code для корректного отображения. Удобно делать кнопкой </>
Это обязательно, см.п.3.8 Регламента.
Сюда же относится traceback, ввод и вывод в консоли и другая структурированная текстовая инфа.
См.п.3.1 Регламента. Также обратите внимание на п.3.2
1. У всех систем сборки есть devserver proxy, настраиваешь чтобы xhr запросы к dev версии клиента по особому урлу(например /api/*) проксировались на dev бэка(точно также как это будет на реальном сайте с одним доменом) и забываешь о ненужном тебе cors. Делается это обычно одной строчкой конфига.
2. Если таки говорить о cors: обычно простые методы добавления хэдеров работают для простых запросов(POSTGET), а для запроса cors(OPTIONS) надо отдельно извращаться. Так что гугли Yii2 OPTIONS Access-Control-Allow-Origin или типа того.
Ответы:
https://www.yiiframework.com/doc/guide/2.0/en/rest...
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Ошибка CORS (Cross-Origin Resource Sharing) возникает, когда браузер блокирует запросы между различными источниками из-за политики безопасности. В случае использования Yii2 в качестве backend и React в качестве frontend, это может привести к проблемам с AJAX запросами между двумя приложениями.
Для решения проблемы CORS в Yii2 при работе с React, вам необходимо настроить CORS на стороне сервера Yii2. Для этого вам нужно создать middleware, который будет добавлять заголовки CORS к ответам сервера.
Пример middleware для Yii2:
```php
namespace app\components;
use yii\filters\Cors;
class CorsFilter extends Cors
{
public function behaviors()
{
return [
'corsFilter' => [
'class' => \yii\filters\Cors::className(),
'cors' => [
'Origin' => ['http://your-react-app-domain.com'],
'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' => [],
],
],
];
}
}
```
Затем вам нужно применить этот middleware к вашему контроллеру или к группе контроллеров:
```php
namespace app\controllers;
use yii\web\Controller;
class ApiController extends Controller
{
public function behaviors()
{
return [
'corsFilter' => [
'class' => \app\components\CorsFilter::className(),
],
];
}
// Ваши методы API здесь
}
```
Теперь Yii2 будет добавлять необходимые заголовки CORS к ответам сервера, что позволит React-приложению делать запросы к backend без ошибок.
Не забудьте также настроить CORS на стороне React, чтобы разрешить запросы к серверу Yii2 с вашего домена. Это можно сделать с помощью библиотеки axios или fetch, добавив необходимые заголовки к запросам.