XMLHttpRequest被axios.post上的CORS策略阻止

Question

axios.post（下面的代码）必须将数据发送到网址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）我在httpd.conf中添加了Header set Access-Control-Allow-Origin "*"。

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

Answer 1

即使在.htaccess中也有此功能，我还是在FF上遇到了困难并为此感到困惑：

Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"。

更多搜索后，我发现了@marcomessa的Gist，可以解决我的问题。

https://gist.github.com/marcomessa/54d077a0208439f5340126ff629a3718

Answer 2

仔细查看错误消息，它指出对the preflight request的响应没有HTTP正常状态。

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

---

顺便说一句，在浏览器获得成功的OPTIONS响应后，它将发出POST请求，但您说过：

  

使用十月方法Route :: get（）

处理路线api / add-todo

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

Answer 3

数小时的搜索，我得到了答案...

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 而不添加！

就是这样。

Answer 4

因此，请对此进行澄清。总是有很多方法可以解决问题。这是我为我所做的。 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,
    ]);
}
});