one specific post request throws CORS error

Question

I have the same articleForm.vue to update and create a new article, depending on if I want to create or update an article I access the vuex store like this.

async function createArticle(article: any) { 
  await store.dispatch('articles/CREATE_ARTICLE', article)
 }

async function updateArticle(article: any) {
  await store.dispatch('articles/UPDATE_ARTICLE', article)
} 

on the articles.ts store I create the article liks this:

  async CREATE_ARTICLE(context: {
    commit: (arg0: string, arg1: any) => void
    state: { articles: any; article: any }
  }) {
    context.commit('reset_article', context.state.articles)
    const url = '/api/articles/'
    // await axiosClient.get("/sanctum/csrf-cookie");
    const resposnse = await axiosClient.post('/api/save-article/', context.state.article)
    return resposnse
  }, 

and update it like this:

  async UPDATE_ARTICLE(context: {
    commit: (arg0: string, arg1: any) => void
    state: { articles: any; article: { id: string } }
  }) {
    context.commit('reset_article', context.state.articles)

    const url = '/api/articles/'
    // await axiosClient.get('/sanctum/csrf-cookie');
    await axiosClient.put(url + context.state.article.id, context.state.article)
  },

the first one creating an article throws an CORS error,

Access to XMLHttpRequest at 'https://end.example.com/api/articles/' from origin 'https://example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

Where which the update requst works fine. also another request creating a category like so:

  axiosClient
    .post("/api/categories", category.value)
    .then(() => {
      router.push("/admin/categories/");
    })
    .catch(err => {
      console.log("not success", err);
    });

Works fine. I'm Using vue 3, composition api, setup syntax and typescript. Also tried with options api with nuxt, save problem. The backend is Laravel 11, also tried with laravel 9 same issues.

Answer 1

So ultimately it was just a / on the axios URL that was cousing it all along

wrong: with the trailing forward slash

const resposnse = await axiosClient.post('/api/save-article/', context.state.article)

Right: Without the trailing forward slash

const resposnse = await axiosClient.post('/api/save-article', context.state.article)