一个特定的发布请求会引发 CORS 错误

Question

我有相同的articleForm.vue来更新和创建一篇新文章，具体取决于我是否想创建或更新一篇文章，我像这样访问vuex商店。

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

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

在articles.ts商店上我创建了这样的文章：

  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
  }, 

并像这样更新：

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

第一个创建文章会抛出 CORS 错误，

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.

update requst

工作正常的地方。 还有另一个请求创建一个类别，如下所示：

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

工作正常。 我正在使用 vue 3、组合 api、设置语法和打字稿。还尝试使用 nuxt 的选项 api，保存问题。后端是Laravel 11，也尝试过laravel 9同样的问题。

Answer 1

所以最终它只是 axios URL 上的一个 / 一直在支持它

错误：尾随正斜杠

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

右：没有尾随正斜杠

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