Access to XMLHttpRequest at……问题出现时怎么办

时间：2025-01-20 22:26:50

后端设置

确保在后端正确配置 CORS 中间件，允许跨域请求并支持凭据传递。

假设你使用的是 ，可以这样设置：

const express = require('express');
const cors = require('cors');
const app = express();

// CORS 配置
const corsOptions = {
  origin: 'http://localhost:5173', // 允许的前端地址
  credentials: true, // 允许发送 cookie
};

(cors(corsOptions));

// 示例路由
('/api/teachers/login', (req, res) => {
  const token = tokenEncode(data); // 生成 JWT
  ('token', token, { 
    maxAge: 30 * 24 * 60 * 60 * 1000, // 30 天
    httpOnly: true, // 仅通过 HTTP 访问，防止 XSS 攻击
    secure: true, // 仅在 HTTPS 下发送
    sameSite: 'None' // 允许跨站点发送 cookie
  });
  ({ message: 'login success' });
});

(8080, () => {
  ('Server is running on port 8080');
});

前端请求设置

确保在前端的请求中包含 credentials: 'include'，这样可以发送和接收 cookie。

fetch('http://localhost:8080/api/teachers/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  credentials: 'include', // 允许发送和接收 cookie
  body: ({
    // 你的请求数据
    name: ,
    sex: ,
    school: ,
    className: , // 修改为className
    phone: ,
    password: ,
    subject: [],
    ismaster: 
  })
})
.then(response => ())
.then(data => {
  ('后端响应结果:', data);
})
.catch(error => ('请求失败:', error));

其他注意事项

  1. 确保后端和前端的域名、端口号正确：确保在 CORS 设置中的 origin 与前端请求的地址一致。

  2. 检查预检请求（OPTIONS 请求）：有时浏览器会先发送一个预检请求（OPTIONS 请求）来检查服务器是否允许实际请求。如果预检请求失败，实际请求就会被阻止。确保后端正确处理 OPTIONS 请求。
     

    ('/api/teachers/login', cors(corsOptions)); // 处理预检请求

  3. HTTPS 配置：如果你在开发环境中使用 HTTPS，需要确保 secure 设置为 true。在本地开发环境中，可以暂时设置为 false 进行调试。

通过这些配置，可以解决 CORS 问题，并允许前端正确接收来自后端的 cookie

相关文章