时间戳

首页 > 解决方案 > 如何使用 octobercms 创建待办事项列表？

laravel - 如何使用 octobercms 创建待办事项列表？

问题描述

我观看了本教程来创建一个简单的 API 并将其与 VueJS 一起使用。

我在获取数据方面没有任何问题，但是当我尝试创建一个新的 Todo 时，我收到了这个错误：

OPTIONS http://localhost/vue-test/api/add-todo2 404（未找到）从源“ http://localhost ”访问“ http://localhost/vue-test/api/add-todo2 ”处的 XMLHttpRequest :8080 ' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态

我的.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, OPTIONS"

这是我的 JavaScript 方法：

addTodo(todo) {
    this.todos.push(todo);

    axios.post('http://localhost/vue-test/api/add-todo2', todo)
      .then(data => {
        console.log(data)
      })
      .catch(err => {
        console.log(err);
      });

这是我的服务器代码：

Route::post('/api/add-todo', function (Request $request) {
    $data = $request->input();
    Todo::create([
    'name' => $data['name'],
    'body' => $data['body'],
    'status' => $data['status']
    ]);
});

标签： laravelapivue.jsaxiosoctobercms

解决方案

我有同样的问题。通过在文件中添加以下行来解决我的问题.htaccess：

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token, cache-control"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

有关更多详细信息，您可以查看这篇文章。

推荐阅读