React如何根据name属性获取meta标签的content内容（如CSRF token）

你完全可以直接复用原生JavaScript的DOM查询逻辑，因为这个meta标签属于页面静态注入的全局元素，不在React的虚拟DOM管控范围内，不需要使用React专属的API操作。

基础实现 #

封装一个通用的获取方法即可，在任意需要用到CSRF Token的位置调用：

const getCsrfToken = () => {
  const csrfMeta = document.querySelector('meta[name="_csrf"]');
  return csrfMeta ? csrfMeta.getAttribute('content') : '';
};

注意：请确保调用该方法时，页面head已经完成加载，meta标签已经被渲染到DOM中

常见使用场景 #

1. 全局请求拦截器注入（以Axios为例） #

如果需要在所有请求中统一携带CSRF Token，可以直接在拦截器中获取并添加到请求头：

import axios from 'axios';

axios.interceptors.request.use((config) => {
  const csrfToken = document.querySelector('meta[name="_csrf"]')?.getAttribute('content');
  if (csrfToken) {
    // 可根据后端要求调整请求头名称，常见为 X-CSRF-Token
    config.headers['X-CSRF-Token'] = csrfToken;
  }
  return config;
}, (error) => Promise.reject(error));

2. React 函数组件内使用 #

如果需要在组件逻辑中使用该值，建议在useEffect钩子中获取，保证DOM已经渲染完成：

import { useEffect, useState } from 'react';

function SubmitForm() {
  const [csrfToken, setCsrfToken] = useState('');

  useEffect(() => {
    // 组件挂载时获取token
    const token = document.querySelector('meta[name="_csrf"]')?.getAttribute('content') || '';
    setCsrfToken(token);
  }, []);

  const handleSubmit = async () => {
    const res = await fetch('/api/submit', {
      method: 'POST',
      headers: {
        'X-CSRF-Token': csrfToken,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({/* 你的请求参数 */})
    });
  };

  return <button onClick={handleSubmit}>提交</button>
}

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