react axios请求携带cookie

### React 中 Axios 请求自动携带 Cookie 的实现 在 React 应用中，如果希望 Axios 发送的请求能够自动携带 Cookie，则需要考虑以下几个方面： #### 1. 配置 `withCredentials` 参数 为了使跨域请求可以携带 Cookie，必须在 Axios 请求配置中启用 `withCredentials` 参数。这可以通过全局配置或单次请求的方式完成。 以下是通过全局配置的方法： ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'http://api.example.com', withCredentials: true, // 启用跨域请求携带 Cookie }); export default instance; ``` 对于单独的请求也可以这样设置： ```javascript axios.get('http://api.example.com/data', { withCredentials: true, }).then(response => { console.log(response.data); }); ``` 此操作确保了每次请求都带有必要的认证信息[^1]。 --- #### 2. 后端 CORS 配置支持 `withCredentials` 当启用了前端的 `withCredentials` 参数后，后端也需要正确配置 CORS 政策以接受此类请求。具体来说，服务器响应头应包含以下字段： - **Access-Control-Allow-Origin**: 设置为具体的域名而非通配符 (`*`)。 - **Access-Control-Allow-Credentials**: 设置为 `true`。 例如，在 Java Servlet 中可如下配置： ```java response.setHeader("Access-Control-Allow-Origin", "http://frontend-domain.com"); response.setHeader("Access-Control-Allow-Credentials", "true"); ``` 而在 Node.js Express 中则可以这样做： ```javascript app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', 'http://frontend-domain.com'); res.header('Access-Control-Allow-Credentials', 'true'); next(); }); ``` 这些配置使得浏览器允许跨域请求并附带用户的会话信息[^3]。 --- #### 3. 使用代理解决开发环境中的跨域问题 在开发环境中，通常推荐使用 Webpack 提供的代理功能来规避显式的跨域问题。可以在项目的 `package.json` 文件中添加以下内容： ```json "proxy": "http://backend-api.com" ``` 或者更灵活地修改 `webpack.config.js` 来处理复杂的路由映射需求。 这种方式下，所有的 API 请求会被重定向至目标地址，从而避免直接暴露跨域逻辑给开发者[^1]。 --- #### 4. 注意事项 - 如果涉及多个子域名间的通信（如 `a.domain.com` 和 `b.domain.com`），需确认它们共享相同的顶级域名，并调整 `.domain` 属性以便统一存储 Cookies。 - 对于生产环境下 HTTPS 协议的要求更加严格，请务必保证前后端均采用安全连接传输数据[^4]。 --- ### 示例代码总结 最终完整的解决方案可能看起来像下面这样： ```javascript // 创建 Axios 实例 import axios from 'axios'; const apiClient = axios.create({ baseURL: 'https://api.yourserver.com/', timeout: 5000, withCredentials: true, // 关键点：开启跨域时携带 Cookie }); // GET 请求示例 apiClient.get('/endpoint') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); // POST 请求示例 apiClient.post('/login', { username: 'test', password: 'password' }) .then(response => { console.log('Login successful:', response.data); }); ``` ---