javascript - Laravel 两次运行 axios 发送的请求

Question

所以我想使用 axios 从前端向 Laravel 发送请求，它是跨源的，因此前端位于 localhost:3000 ，后端位于 localhost:8000/api >,

在 Laravel 中，我已经应用了 CORS 中间件 this 。在 axios 中我已经设置了标题。

axios 设置

axios.defaults.baseURL = API_URL
axios.defaults.headers.common.Accept = 'application/json'
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*'

axios 发布和删除:

 function create(){
    return dispatch => {
        return new Promise((resolve,reject)=>{
            HTTP.get('/post/category/create')
                .then((data)=>{
                    return resolve(data.data.data)
                }).catch((data)=>{
                    return reject(data)
                })
        })
    }
}
export function destroy(data){
    return dispatch => {
        return new Promise((resolve,reject)=>{
            HTTP.delete(`/post/category/${data}`)
                .then((data)=>{
                    return resolve(data.data)
                }).catch((data)=>{
                    return reject(data)
                })
        })
    }
}

我如何调用该函数:

 var SubmitCategory = async (e) => {
        e.preventDefault();
        var formData = new FormData(e.target)
        await setSubmit(true);
        await props.dispatch(insert(formData))
            .then(data=>{
                toaster(data.message,data.status)
                props.history.replace({
                    pathname: `/post/category`
                })
            })
            .catch(data=>{
                toaster(data.message,"error")
                setError(data)
            })
        await setSubmit(false)
    }


<form autoComplete="off" onSubmit={e=>SubmitCategory(e)}> <<--- onSubmit
...////

laravel 函数的外观:

public function store(Request $request)
{
    // return response()->json($request,500);
    try {
        DB::beginTransaction();
        $data = $request->all();

        $cat = Category::create($data);

        DB::commit();

        return response()->json([
            'status'     => 'success',
            'id'         => $cat->id,
            'code'       =>  200,
            'message'    => 'Category Created'
        ],200);

    } catch (\Exception $e) {
        DB::rollback();
        return response()->json([
            'status'     => 'error',
            'code'       =>  500,
            'message'    => $e->getMessage()
        ],500);
    }
}

每个方法都会发生这种情况，因此当我创建某些内容时，它会创建两条记录，当我删除某些内容时，第一个记录将被成功删除，而第二个不需要的请求将失败(因为它已被删除)。

我的第一个想法是 axios 发送了两个请求，其中一个是 OPTIONS 方法，我做了一些谷歌研究，它无法被关闭，并有其他一些方法来处理它，仍然没有。

编辑cors.php文件

<?php

    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 600,
    'supports_credentials' => false,

Answer 1

当您使用 CORS 时，浏览器可能需要在 GET 请求之前发送 OPTIONS 请求。 (如果是这样，当您使用 XMLHttpRequest/fetch/etc 发出 GET 时，它会自动执行此操作。)您需要区分 >OPTIONS 请求和服务器端的 GET 请求，并且只有在获取 GET 时才实际执行工作，而不是在获取 OPTIONS 时执行工作 之前。

<小时/>

旁注:Access-Control-Allow-Origin 是一个响应 header 。您不应该告诉 axios 将其与请求一起发送(这样做不会执行任何操作)。 More on that here.. .