在axios.post上被CORS Policy阻止的XMLHttpRequest

Question

axios.post（下面的代码）必须将数据发送到url api/add-todo，但我收到以下错误：

  axios.post('http://localhost/vueoctober/todo/api/add-todo', todo).then(function (response) {
    console.log(response);
  }).catch(function(error) {
    console.log(error);
  });

路线api/add-todo用十月法Route::get()（https://octobercms.com/docs/services/router）处理。为什么没找到？

如果我将axios.post改为axios.get它将会起作用！但我需要发布数据，而不是获取。

我尝试了什么：

1）我试图将这些标题添加到.htaccess：

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTION"

它只适用于axios.get。 axios.post仍在阻挡。

2）我将Header set Access-Control-Allow-Origin "*"添加到httpd.conf。

Vue应用程序在端口8080服务，因此axios.post网址不能是相对的。

Answer 1

仔细查看错误消息，它表示对the preflight request的响应没有HTTP ok状态。

显然，您的服务器端代码没有OPTIONS请求的路由处理程序，因此您需要添加一个。

---

顺便说一下，在浏览器获得成功的OPTIONS响应后，它会发出POST请求，但你说：

使用October方法Route :: get（）处理路径api / add-todo

你需要使用Route::post()来处理它。

Answer 2

几小时的谷歌搜索，我得到了答案......

1）安装插件Cross-Origin Resource Sharing (CORS)。

2）在Vue应用程序的htaccess中添加：

Header set Access-Control-Allow-Origin '*'
Header set Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTION"

注意！写SET不是ADD！

而已。

Answer 3

所以要澄清一下。总有很多方法可以解决问题。这就是我为我所做的。 Check this for Preflight Request。预检请求由浏览器创建，不是为了安全。我首先创建的这个函数会在请求时抛出一条好消息，然后如果数据包含任何数据，它将执行它所调用的内容（这是你检查安全性的地方）。我不必乱用.htaccess文件。虽然我确实安装了CORS插件，因为它是一个不错的插件。此外，来自观看学习的视频是作者正在提出一个跨越原始的请求，在这个请求中他会讨论如何纠正问题。我认为他只是在预检请求开始成为浏览器规范之前拍摄了视频。找到路由信息here。

Route::match(['POST', 'OPTIONS'],'api/update-todo', function(Request $req) {
$data = $req->input();
if (!empty($data)) {
    Todo::where('id', $data['id'])
        ->update([
        'name' => $data['name'],
        'description' => $data['description'],
        'status' => $data['status'] 
    ]);
    return response()->json([
        'Success' => $data,
    ]);
} else {
    return response()->json([
      'Success' => $req,
    ]);
}
});