创建文章的POST请求触发CORS错误，更新及分类请求正常

核心问题分析 #

你遇到的CORS错误提示Redirect is not allowed for a preflight request，本质是创建文章的POST请求触发了301/302重定向，而浏览器的OPTIONS预请求不允许重定向，因此直接拦截了请求。其他请求（更新文章PUT、创建分类POST）正常，说明整体CORS配置没问题，问题出在创建文章请求的URL或后端路由匹配上。

具体排查与解决步骤 #

1. 核对请求URL与后端路由的一致性 #

你的创建文章action代码中，定义了const url = '/api/articles/'但实际发起请求的是/api/save-article/，先确认：

• 后端Laravel是否存在POST /api/save-article（或带斜杠的/api/save-article/）路由？
• 对比创建分类的请求/api/categories（无末尾斜杠），Laravel路由默认对末尾斜杠敏感，如果路由定义时没有斜杠，请求带斜杠会触发301重定向。

修正方式：
统一URL格式，确保请求URL和后端路由定义完全匹配。比如：
如果后端路由是Route::post('/api/save-article', ...)，则前端请求改为：

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

2. 检查Laravel的CORS配置文件 #

打开config/cors.php，确认以下配置：

• paths数组包含你的API路径，比如['api/*']或具体的'api/save-article'、'api/articles/*'
• allowed_methods包含'POST'、'PUT'等需要的HTTP方法
• allowed_origins明确添加前端域名'https://example.com'
• 如果使用Laravel Sanctum，确保supports_credentials设为true，且前端axios配置了withCredentials: true

示例CORS配置片段：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['https://example.com'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

3. 验证请求的实际响应状态 #

用浏览器开发者工具的Network面板，查看创建文章请求的：

• 状态码：是否是301/302重定向？
• 重定向目标：如果是重定向到非API页面（比如Laravel的404页面或前端页面），说明路由不匹配，需要修正后端路由定义。

也可以直接用Postman测试https://end.example.com/api/save-article（或带斜杠的版本），确认是否返回正常的JSON响应，而非重定向。

4. 修正代码中的潜在问题 #

• 创建文章action里的变量名resposnse是拼写错误，建议修正为response
• 当前action没有使用传入的article参数，而是直接取context.state.article，如果组件调用createArticle(article)时未同步到Vuex state，可能导致请求数据异常，建议调整action逻辑：

async CREATE_ARTICLE(context, article) {
  context.commit('reset_article', context.state.articles)
  const response = await axiosClient.post('/api/save-article', article)
  return response
},

内容的提问来源于stack exchange，提问作者key