axios 发送的请求被 Laravel 运行了两次

Question

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

在 Laravel 中，我已经使用 this 应用了 CORS 中间件。在 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 是 响应 标头。你不应该告诉axios 用 request 发送它（这样做不会做任何事情）。 More on that here...