Sails、React 和 Axios CORS 策略出错：请求的资源上不存在“Access-Control-Allow-Origin”header

Question

我真的研究过这个问题，但 SailsJS 还不清楚。 我正在运行并在 npm 启动时在本地做出反应。

版本：

• 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.

我真的检查了 stackoverflow.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在sails中的配置是：

 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" },

Answer 1

我只是这样使用

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

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

Answer 2

最后，我是这样解决的：

在 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(), } }, }; };

Answer 3

在/config/http.js文件中，取消注释“订单”数组片段并在 myRequestLogger 方法中添加 header 参数。

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) 中添加以下代码片段

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 });

Answer 4

确保在允许的 header 中添加授权以允许将令牌 / cookies 传递到后端

 config/settings.js -> module.exports.security = { cors: { allRoutes: true, allowOrigins: '*', allowCredentials: true, allowAnyOriginWithCredentialsUnsafe: true, allowRequestHeaders: 'content-type,Authorization' } }