具有 REST 身份验证 API 的节点快递网站 - CORS 问题

Posted

技术标签:

【中文标题】具有 REST 身份验证 API 的节点快递网站 - CORS 问题【英文标题】:node express website with REST authentication API - CORS problem 【发布时间】:2020-09-22 14:27:36 【问题描述】:

我是 nodejs + Express 的新手,但我正在尝试构建一个非常快速的概念验证网站,允许用户通过 REST API 进行身份验证。

我遇到了 CORS 问题,尽管安装了 cors 模块并按照documentation 中的建议使用它,但我仍然收到以下错误:

在 xxx 处访问 XMLHttpRequest 已被 CORS 策略阻止: 对预检请求的响应未通过访问控制检查: “Access-Control-Allow-Origin”标头有一个值 'https://www.example.com' 不等于提供的原点。

这是我的(简化的)代码:

app.js

const express = require('express');
const expressLayouts = require('express-ejs-layouts');
const cors = require('cors');

compression = require('compression'),
shouldCompress = (req, res) => 
    if (req.headers['x-no-compression']) 
      // don't compress responses if this request header is present
      return false;
    
    // fallback to standard compression
    return compression.filter(req, res);
  ;

const app = express();


// EJS
app.use(expressLayouts);
app.set('view engine', 'ejs');

// Parsing related
app.use(express.urlencoded(  extended: false )); //Parse URL-encoded bodies
app.use(express.json()); //Used to parse JSON bodies

app.use(compression(
    filter:shouldCompress,
    threshold: 3
));

app.use(express.static('public'));
app.disable('x-powered-by');


// Using the flash middleware provided by connect-flash to store messages in session
// and displaying in templates
const flash = require('connect-flash');
app.use(flash());

// Sessions
const session = require('express-session');

app.use(session(
  secret: 'fat cat 42',
  resave: false,
  saveUninitialized: true,
  cookie:  secure: true 
));

// Initialize Passport and restore authentication state, if any, from the session.
const passport = require('passport');
require ('./config/passport')(passport);
app.use(passport.initialize());
app.use(passport.session())

// Routes
app.use('/', require('./routes/index'));
app.use('/member', require('./routes/users'));


const PORT = process.env.PORT || 5000;

app.listen(PORT, console.log(`Server started on port: $PORT`));

users.js

const express = require('express');
const router = express.Router();
const passport = require('passport');

require ('../config/passport')(passport);


router.post('/signin', passport.authenticate('facebook', 
    successRedirect : '/home',
    failureRedirect : '/'
  ));

module.exports = router;

这是创建 AJAX POST 的视图的脚本部分

homepage.ejs

   $(document).ready(function()
      $('#demo').click(function(e)
        $.ajax(
          method: "POST",
          url: "/member/signin",
          data: 
            "source": $(this).attr('id')
          ,
          dataType: "json",
          timeout: 5000 // 5000ms
        ).done(function(data) 
          // is called if request is successful
          console.log('Success:' + data);
        ).fail(function(jqXHR, status) 
          // is called if request fails or timeout is reached
          alert('Request could not complete: ' + status);
        );
      );
    );

如何解决此问题以使 AJAX 调用正常工作?

【问题讨论】:

【参考方案1】:

基本上您需要允许跨站点源请求。你可以通过在你的节点服务器前面设置access-control-headers 通常使用一些代理来做到这一点,比如 nginx,如下所示(不建议将节点直接暴露在端口 80 上)

#nginx config
if ($request_method = 'OPTIONS') 
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, HEAD, DELETE, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With';
    return 204;

如果你有 expressjs,你可以使用this cors middleware

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.post('/signin/', function (req, res, next) 
    // ....
)

【讨论】:

我已尝试按照 cors 文档中的建议使用 cors 模块,但没有解决问题 - 我是否还需要更改 nginx 配置 ?理想情况下,我只想在 node express 中进行设置。 如果你已经有 nginx,那么这就是他们需要去的地方。还要确保您指定为源的域确实是您的前端部署的域。

以上是关于具有 REST 身份验证 API 的节点快递网站 - CORS 问题的主要内容,如果未能解决你的问题,请参考以下文章

使用 Facebook 进行身份验证的网站的 REST API

具有同源策略和 OAuth 的 REST API 身份验证

Spring boot 如何让 Thymeleaf 网页和 REST API 具有不同的身份验证方案

Mongolab REST API 如何进行身份验证

Mongolab REST API 如何进行身份验证

带有 jwt 身份验证的 django rest api 要求 csrf 令牌