使用 CORS 策略的 Sails、React 和 Axios 错误：请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-03-04

【中文标题】使用 CORS 策略的 Sails、React 和 Axios 错误：请求的资源上不存在“Access-Control-Allow-Origin”标头

【英文标题】：Sails, React and Axios Error with CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

【发布时间】：2021-03-29 16:08:24

【问题描述】：

我已经真正研究过这个问题，但 SailsJS 还不清楚。我正在运行并在本地使用 npm start 做出反应。

版本：

Sailsjs：1.4.0 ReactJS：^16.13.1 Axios：^0.19.2 节点：v15.0.1

错误：Access to XMLHttpRequest at 'http://localhost:1337/User/Read/2' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我确实检查了 ***.com 中的票证和sails 中的文档，还测试了不同的解决方案和选项，我可以工作的唯一方法是使用 chrome 中的 Moesif Origin & CORS Changer 小部件，但我需要配置标题以及产品的安全性：

https://sailsjs.com/documentation/concepts/security/cors, https://sailsjs.com/documentation/reference/configuration/sails-config-security

请求标头：

GET /User/Read/2 HTTP/1.1
Host: localhost:1337
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/87.0.4280.88 Safari/537.36
Origin: http://localhost:3000
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9

我在 security.js 中对帆中 cors 的配置是：

module.exports.security = 
  cors: 
    allRoutes: true,
    allowOrigins: ['http://localhost:3000'],
    allowCredentials: false,
    allowRequestHeaders: [
      'X-Powered-By', 
      'Content-Type', 
      'Accept', 
      'Origin',
      'Accept-Encoding',
      'Accept-Language',
      'Connection',
      'Host',
      'Origin',
      'Referer',
      'Sec-Fetch-Dest',
      'Sec-Fetch-Mode',
      'Sec-Fetch-Site',
      'User-Agent',
      'Pragma',
      'Cache-Control',
    ]
  ,
  csrf: false
;

React 中的 Axios 请求：

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',
    ).then(function (response) 
      console.log(response.data);
);

以及路由请求：

  'GET /User/Read/:id': 
    controller: "User", 
    action: "read"
  ,

【参考方案1】：

最后我是这样解决的：

在sails 中的http.js 上，添加了req 标头：

module.exports.http = 

  middleware: 
    order: [
      'cookieParser',
      'session',
      'bodyParser',
      'compress',
      'poweredBy',
      'appRequestLogger', // custom logger
      'router',
      'www',
      'favicon'
    ],

    appRequestLogger: function (req, res, next) 
      const env = process.env.NODE_ENV || 'development';
      sails.log.debug('<<------------------------------');
      sails.log.debug('Requested data :: ');
      sails.log.debug('  ', req.method, req.url);
      sails.log.debug('   Headers:');
      sails.log.debug(req.headers);
      if (env.toLowerCase() !== 'production') 
        sails.log.debug('   Params:');
        sails.log.debug(req.params);
        sails.log.debug('   Body:');
        sails.log.debug(req.body);
      
      sails.log.debug('------------------------------>>');

      // This is a work around to allow CORS requests as Sails does not send these
      // headers in the response to preflight/actual requests even when they are
      // declared in config/security.js under CORS config

        res.header('Access-Control-Allow-Origin', '*');
        res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
        res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, HEAD');
        res.header('Allow', 'GET, POST, PUT, DELETE, OPTIONS, HEAD');
        res.header('X-Powered-By', '');

      // Check graphql preflight request, if yes then prevent the request reaching
      // the express-graphql server. Currently the express-graphql server only accepts
      // GET and POST hence rejects the preflight request. CORS needs that a server
      // accepts preflight requests to facilitate cross-site access. Therefore, return
      // immediately with a success.
      // Otherwise fall through by calling next()

      if (req.method === 'OPTIONS' && req.url.indexOf('graphql') > -1) 
        return res.status(200).send();
       else 
        return next();
      
    ,

  ,

;

【参考方案2】：

我就是这样用的

cors: 
    allRoutes: true,
    allowOrigins: "*",
    allowCredentials: false,
    allowRequestHeaders: "*",
  

确保在生产环境中添加allowOrigins: ['http://mywebsite.com] 中的客户端主机

【讨论】：

不，这是文档的响应，但是对于解耦的前端，您需要添加 module.exports.http 信息。

【参考方案3】：

在 /config/http.js 文件中，取消注释 'order' 数组片段并在 myRequestLogger 方法中添加标头参数。

order: [
  'startRequestTimer',
  'cookieParser',
  'session',
  'myRequestLogger',
  'bodyParser',
  'handleBodyParserError',
  'compress',
  'methodOverride',
  'poweredBy',
  '$custom',
  'router',
  'www',
  'favicon',
  '404',
  '500'
],


 myRequestLogger: function (req, res, next) 
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, HEAD');
  res.header('Allow', 'GET, POST, PUT, DELETE, OPTIONS, HEAD');
  res.header('X-Powered-By', '');
  return next();
,

在/config/cors.js（sails v0.12）或/config/security.js (sails v1.x) 添加如下代码sn-p

module.exports.security =  //sails v1.x, if is sails v0.12 change security for cors
  allRoutes: true,
  allowOrigins: '*',
  allowCredentials: false,
  allowRequestMethods: 'GET,POST,PUT,DELETE,OPTIONS,HEAD',
  allowRequestHeaders: 'content-type'

如果这些都不起作用（我发现这很难发生），请添加您的 controller 方法的返回（但是，我认为没有必要） ：

  return res.set(
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
  ).json( status: true, //body );