React中使用Axios发送POST请求（X-CSRF-Token）的正确方式咨询

嘿，我来帮你理清这个问题并给出最优方案～

首先，先拆解你遇到的两个核心问题： #

1. 为什么不带CSRF头也能成功提交？

这大概率是因为你的/addpost路由被加到了Laravel的CSRF豁免列表里了！去检查app/Http/Middleware/VerifyCsrfToken.php文件中的$except数组，如果里面有'addpost'或者对应的路由规则，那确实会跳过CSRF验证——这绝对是安全隐患，必须把它从列表里移除，不然恶意站点很容易伪造请求攻击你的接口。

另外，也有可能是你之前的jQuery $.ajaxSetup配置没影响到Axios，但如果路由没在豁免列表里，正常情况下不带CSRF头的请求会直接被Laravel拦截，所以先优先排查这个点。

2. 你的Axios POST请求实现可以优化

你当前的写法本身没问题，但有更简洁、更符合React和Axios最佳实践的方式：

第一步：全局配置Axios（推荐）

在React项目的入口文件（比如index.js）里统一配置Axios，不用每次请求都重复写请求头和baseURL：

import axios from 'axios';

// 设置默认请求地址前缀，后续请求只用写相对路径
axios.defaults.baseURL = 'http://127.0.0.1:8000';

// 全局配置CSRF令牌
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken;

// 默认设置POST请求的Content-Type为application/json
axios.defaults.headers.post['Content-Type'] = 'application/json';

第二步：简化你的表单组件代码

• 移除form标签里的method="POST"和action属性（因为你用e.preventDefault()阻止了浏览器默认提交，这些属性只会造成混淆）
• 推荐用受控组件替代refs来管理表单输入（更符合React的数据流理念，也更容易维护）

优化后的组件代码：

import React, { Component } from 'react';
import axios from 'axios';

export default class Form extends Component {
  constructor(props) {
    super(props);
    // 用state管理输入值
    this.state = { title: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(e) {
    // 实时更新state中的输入值
    this.setState({ title: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    
    // 直接传JavaScript对象，Axios会自动帮你转成JSON
    axios.post('/addpost', { title: this.state.title })
      .then(response => console.log(response.data))
      .catch(error => console.log(error));
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input 
            value={this.state.title}
            onChange={this.handleChange}
            name="title" 
            type="text" 
          />
          <input type="submit" />
        </form>
      </div>
    )
  }
}

最后再确认几个关键点： #

• 确保VerifyCsrfToken中间件没有豁免/addpost路由
• 全局配置Axios后，所有请求都会自动带上CSRF头，不用每次手动设置
• 受控组件让表单状态更可控，后续扩展表单字段也更方便

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