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

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 由 October 方法 Route::get() ( https://octobercms.com/docs/services/router ) 处理。为什么找不到？

如果我将 axios.post 更改为 axios.get 它将起作用!但是我需要post数据，而不是get。

我尝试了什么:

1) 我尝试将这些 header 添加到 .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 url 不能是相对。

Answer 1

即使我在 .htaccess 中有这个，我也在 FF 上遇到这个问题并挣扎:

header 设置 Access-Control-Allow-Methods“PUT、GET、POST、DELETE、OPTIONS”。

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

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