Ad

How Create A Todo List With Octobercms?

- 1 answer

I watched this tutorial to create a simple API and use it with VueJS.

I do not have any problem with fetching data but when I try to create a new Todo I get this error:

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

My .htaccess configuration:

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"

This is my JavaScript method:

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);
      });

And this is my server code:

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

Answer

I had the same problem. My problem fixed by adding the following lines to the .htaccess file:

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]

For more details, you can check this article.

Ad
source: stackoverflow.com
Ad