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

Question

我看了 this tutorial 创建一个简单的 API 并将其与 VueJS 一起使用。

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

OPTIONS http://localhost/vue-test/api/add-todo2 404 (Not Found) Access to XMLHttpRequest at 'http://localhost/vue-test/api/add-todo2' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status

我的.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']
    ]);
});

Answer 1

我遇到了同样的问题。通过将以下行添加到 .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 ^(.*)$  [R=200,L]

更多详情，您可以查看this article。

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

How create a todo list with octobercms?

api

laravel

vue.js

octobercms

axios