后端验证失败引发“CORS 策略”错误答案

【问题标题】：Backend validation fail throws "CORS policy" error后端验证失败引发“CORS 策略”错误
【发布时间】：2022-01-23 17:52:48
【问题描述】：

我正在使用前端 React 和后端 Laravel 8 开发用户注册功能。当输入字段有效时，它工作正常。但是，即使任何输入字段在后端验证中失败，它也会抛出一个错误，指出“访问已被 CORS 策略阻止”。 Here is an image of the error。我的问题是为什么在输入字段有效时一切正常，但在失败时抛出不相关的错误。以下是我的代码：

前端（反应）

const register = async(values) => {

        const {email, serial, password, confirm_password} = values;

        const details = {email : email, serial : serial, password: password, password_confirmation : confirm_password};

        try {

            const result = await fetch('http://192.168.1.15:8000/api/v1/register', {
                method: 'POST', // or 'PUT'
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(details),
            })

            const data = await result.json();

            if (data.error) {
                
                console.log(data.error)
            }
            else {
                setUser(data.data)
                cookies.set('Noortap', data.data, { path: '/' });
                console.log(cookies.get('Noortap'))
            }


        }
        catch (err) {
            console.log(err)
        }

    }

后端（Laravel）

  public function register(Request $request)
    {
        

         $request->validate([
            'name' => 'max:255',
            'email' => 'required|unique:users,email|email|max:255',
            'serial' => ['required','max:255', new IsValidSerialNumber],
            'password' => 'required|confirmed',

         ]);
        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'is_admin' => 0,
            'password' => Hash::make($request->password)
        ]);

        \App\Models\Tag::where('serial_number', $request->serial)->update([
            'assigned' => 1,
            'user_id' => $user->id
        ]);

        // // response
        //  return $this->login($request);
        return $request;

    }

【问题讨论】：

CORS 标头添加到响应中，但是验证异常将阻止添加它们的中间件运行。这可能不是一个大问题。

标签： reactjs laravel validation cors

【解决方案1】：

那是因为您的前端和后端位于不同的“域”上。在这种情况下，它们位于同一域但不同的端口上。您需要将http://192.168.1.15:3000 添加到app/Http/Middleware/VerifyCsrfToken.php 中的$except 数组中，这样您就不会遇到CORS 策略问题。

所以你的文件应该是这样的：

<?php

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;

class VerifyCsrfToken extends Middleware
{
    /**
     * The URIs that should be excluded from CSRF verification.
     *
     * @var array<int, string>
     */
    protected $except = [
        '192.168.1.15:3000'
    ];
}

【讨论】：