首页 > 解决方案 > 使用 Yii2 API 和 ReactJS 前端的 CORS 错误

问题描述

对于使用 Yii2 API 和 React Js 的人来说,这个问题似乎很容易。结合这项技术,我很新。

我有一个 Yii2 API,其行为配置如下所示

public $serializer = [
    'class' => 'yii\rest\Serializer',
    'collectionEnvelope' => 'items',
];

public static function allowedDomains()
{
    return [
       '*'   // star allows all domains
       'http://localhost:3000',
    ];
}  

public function behaviors()
    {
        return array_merge(parent::behaviors(), [

            // For cross-domain AJAX request
            'corsFilter'  => [
                'class' => \yii\filters\Cors::className(),
                'cors'  => [
                    // restrict access to domains:
                    'Origin'=> static::allowedDomains(),
                    'Access-Control-Request-Method'    => ['POST','GET','PUT','OPTIONS'],
                    'Access-Control-Allow-Credentials' => false,
                    'Access-Control-Max-Age'           => 3600,// Cache (seconds)
                    'Access-Control-Request-Headers' => ['*'],
                    'Access-Control-Allow-Origin' => false,

                ],
            ],

        ]);
    }

当我使用 GET 在此 API 上使用获取请求时,它运行良好并将数据返回到我的 reactjs 前端。

现在,我正在尝试为我的应用程序实现一个注册,我需要使用 POST 从我的前端向我的 API 发送数据。(我已经实现了我的注册操作,它与邮递员配合得很好。)当我尝试发出一个发布请求时对于此 API,我在控制台上收到错误消息(CORS 标头“Access-Control-Allow-Origin missing”)。下面是我的 Reactjs 请求,我真的不知道我错过了什么。对此的任何帮助将不胜感激。

//this function is to save data to the API
saveUser = (user) => {

    fetch(URL_SIGNUPUSER, {
    method: 'post',
    mode: "cors",
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        //'Access-Control-Allow-Credentials': "*"
    },
    body: JSON.stringify({
                          name:user.name,
                          username:user.username,
                          email:user.email,
                          password:user.password,
                        })
    }).then(res=>res.json())
    .then(()=>{
        this.setState({
            user: { name:'',
                    username:'',
                    email:'',
                    password:'',
                    confirm_password:'',
                },
            success:true,
            error:false
        })
    });
}

标签: reactjsrestyiiyii2

解决方案


推荐阅读