Sails、React与Axios的CORS跨域问题：缺少Access-Control-Allow-Origin头

我帮你排查下这个CORS报错的问题，看起来你已经做了不少尝试，但配置里有几个小细节没注意到，咱们一步步来解决：

1. 修正Sails的CORS配置（security.js） #

你的配置里有个小问题：allowRequestHeaders里重复写了Origin，这可能导致配置解析异常。另外，建议根据需求调整allowCredentials，并补充必要的响应头配置。修改后的配置如下：

module.exports.security = {
  cors: {
    allRoutes: true, // 对所有路由启用CORS
    allowOrigins: ['http://localhost:3000'], // 只允许React的本地地址
    allowCredentials: true, // 如果前端需要携带凭证（如cookie）请设为true，否则可设为false
    allowRequestHeaders: [
      'Content-Type',
      'Accept',
      'Origin',
      'Accept-Encoding',
      'Accept-Language',
      'Connection',
      'Host',
      'Referer',
      'User-Agent',
      'Pragma',
      'Cache-Control'
    ],
    allowResponseHeaders: ['Content-Type', 'Authorization'] // 暴露给前端的响应头，可选但推荐配置
  },
  csrf: false
};

2. 必须重启Sails服务 #

修改配置后一定要重启你的Sails应用（停止npm start后重新启动），否则新的CORS配置不会生效——这是很多人容易忽略的点！

3. 调整前端Axios请求 #

如果后端设置了allowCredentials: true，前端Axios请求需要添加withCredentials: true参数，确保凭证能正确传递：

var axios = require('axios');
axios({
  method: 'get',
  headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/json;charset=UTF-8'
  },
  url: 'http://localhost:1337/User/Read/2',
  withCredentials: true // 和后端allowCredentials保持一致
}).then(function (response) {
  console.log(response.data);
}).catch(err => {
  console.error('请求错误:', err);
});

4. 验证配置是否生效 #

用curl命令测试后端是否返回正确的CORS响应头：

curl -H "Origin: http://localhost:3000" -I http://localhost:1337/User/Read/2

如果响应头里包含Access-Control-Allow-Origin: http://localhost:3000，说明配置已经生效；如果没有，检查你的security.js是否有语法错误（比如逗号遗漏），或者Sails是否正确加载了配置文件。

生产环境注意事项 #

• 把allowOrigins替换成你实际的React生产域名（比如['https://your-react-app.com']），不要用*，避免安全风险
• 如果使用反向代理（如Nginx），需要确保代理服务器也正确传递CORS头
• 启用HTTPS，生产环境下CORS对HTTPS有更严格的安全要求

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