从本地前端应用程序到本地后端 Sails JS 蓝图 REST 路由的 XHR 请求出现 401 错误

Question

我在 localhost:8080 上运行有一个前端 Vue 应用程序。我正在尝试向我的后端应用程序发送请求，一个 Sails JS 节点应用程序，运行ning on localhost:1337.

我的 Vue 应用程序的请求代码如下所示：

actions/index.vue

async testFetch() {
  await fetch('http://localhost:1337/recipe', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        displayName: 'test',
      }),
    });
}

根据 Chrome devtools，请求似乎正在正确发送。复制为 CURL：

curl 'http://localhost:1337/recipe' \
  -H 'Connection: keep-alive' \
  -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36' \
  -H 'Content-Type: application/json' \
  -H 'Accept: */*' \
  -H 'Origin: http://localhost:8080' \
  -H 'Sec-Fetch-Site: same-site' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: http://localhost:8080/' \
  -H 'Accept-Language: en-US,en;q=0.9' \
  --data-binary '{"displayName":"test"}' \
  --compressed

我的后端应用程序是使用 Sails JS CLI 版本 1.4.0 创建的 Sails JS 节点应用程序。我运行命令 sails new 并选择了 webapp 选项。我运行应用 sails lift.

我相信我有适合 Sails 应用程序的 CORS 设置。无论如何，在我设置 CORS 设置之前，我在前端收到 CORS 错误，现在我没有了。

backend/config/security.js

module.exports.security = {
  cors: {
    allRoutes: true,
    allowOrigins: ['http://localhost:8080'],
  },
  csrf: false
};

为了减少调试中的变量，我暂时禁用了csrf。

根据 Sails JS documentation，如果我启用了 REST 蓝图，那么当我创建模型时，应该会自动为其创建路由和操作（如果服务器被拆除并重新启动sails lift)。我相信我有正确的配置来启用此功能：

backend/config/blueprints.js

module.exports.blueprints = {
  actions: false,
  rest: true,
  shortcuts: false,
};

我相信我已经正确地建立了一个模型，所以 Sails 应该为所述模型创建蓝图路线和蓝图动作：

backend/api/models/Recipe.js

module.exports = {
  attributes: {
    displayName: {
      type: 'string',
      required: true,
      example: 'Mamas puddin',
    },
  },
};

据我所知，我在 backend/api/controllers 中没有冲突的操作或控制器。另外，据我所知，我在 backend/config/routes.js 中没有冲突的路线。在 Chrome devtools 中查看我的回复是“未经授权”，状态代码为 401。终端运行ningsails lift显示<- POST /recipe。如果我向不同的路由发送请求，例如 /foo/bar，我会收到 404。另外，如果我将浏览器导航到 localhost:1337（而不是简单地使用 Sails JS 应用程序作为 API), 默认的 Sails JS webapp 功能正常。

如何向 Sails JS 应用程序上的蓝图路由发送 XHR 请求？

Answer 1

我得到 401 的原因是默认的 Sails webapp 有一个应用于所有路由的策略，要求它们登录（登录中间件在每条路由上运行），只有少数例外.

为了使用我的蓝图路线，我需要为我的 *action 添加此策略的例外。（编辑：我相信政策映射到 actions 而不是路由。）

backend/config/policies.js

module.exports.policies = {

  '*': 'is-logged-in',

  // Bypass the `is-logged-in` policy for:
  'entrance/*': true,
  'account/logout': true,
  'view-homepage-or-redirect': true,
  'view-faq': true,
  'view-contact': true,
  'legal/view-terms': true,
  'legal/view-privacy': true,
  'deliver-contact-form-message': true,
  // I needed to add my Model's Blueprint route to the exceptions
  'recipe/*': true,

};

我相信 true 只是取代了可能的政策功能。无论如何，请求现在成功并带有 200 代码。

从本地前端应用程序到本地后端 Sails JS 蓝图 REST 路由的 XHR 请求出现 401 错误

Getting 401 error on XHR request from local frontend app to local backend Sails JS Blueprint REST route

javascript

node.js

sails.js