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

Question

I have a frontend Vue app running on localhost:8080. I'm attempting to send a request to my backend application, a Sails JS node app, running on localhost:1337.

My request code from my Vue app looks like this:

actions/index.vue

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

According to Chrome devtools, the request appears to be sending properly. Copied as 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

My backend app is a Sails JS node app that was created with Sails JS CLI version 1.4.0 . I ran the command sails new and chose the webapp option. I run the app with sails lift .

I believe I have the proper CORS settings for the Sails app. In any case, before I set up CORS setttings, I was getting CORS errors on the frontend, and now I'm not.

backend/config/security.js

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

I have disabled csrf for now so as to reduce variables in debugging.

According to the Sails JS documentation , if I have enable REST Blueprints, then when I create a Model, there should automatically be routes and actions created for it (if the server is torn down and re-launched with sails lift ). I believe I have the proper configuration to enable this feature:

backend/config/blueprints.js

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

I believe I have established a Model properly, so Sails should be creating a Blueprint Route and Blueprint Action for said model:

backend/api/models/Recipe.js

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

As far as I'm aware, I have no conflicting actions or controllers in backend/api/controllers . Also, as far as I'm aware, I have no conflicting routes in backend/config/routes.js . My response as viewed in Chrome devtools is "Unauthorized," with a status code of 401 . The terminal running sails lift shows <- POST /recipe . If I send a request to a different route, say, /foo/bar , I get a 404. Also, if I navigate my browser to localhost:1337 (rather than simply use the Sails JS app as an API), the default Sails JS webapp functions properly.

How can I send an XHR request to a Blueprint route on a Sails JS app?

Answer 1

The reason I was getting 401 is that the default Sails webapp has a policy applied to all routes that requires them to be logged in (the login middleware is run on every route), with a few exceptions.

In order to use my Blueprint route, I needed to add an exception to this policy for my *action. (EDIT: I believe the policies map to actions rather than routes.)

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,

};

I believe true simply takes place of a possible policy function. In any case, the request now succeeds with a 200 code.