使用 node js api 时如何从 React js 前端应用程序中使用 windows

Question

在提问之前，请注意，我已经尝试了许多来自 stackoverflow 以及许多其他网站的建议。有很多建议，但大多数都没有直接解决这个问题。

我的问题简单的一句话是，如何让我的网络服务器（这是一个基于 node js express 的 api）知道在内网应用程序中记录的 windows 用户 id（来自我的 react js 应用程序）？

到目前为止，我能够编写基于 express 的 node js 服务器，它使用 node-sspi 库并为我提供 Windows 用户 ID 和组。 这个API很简单

    var express = require('express');
    var app = express();
    var server = require('http').createServer(app);
    let cors = require('cors')
    app.use(cors())


    app.use(function (req, res, next) {
    var nodeSSPI = require('node-sspi');
    var nodeSSPIObj = new nodeSSPI({
        retrieveGroups: true
    });
    nodeSSPIObj.authenticate(req, res, function(err){
        res.finished || next();
    });
    });

    app.get('*', function (req, res, next) {
        res.json({msg: '************  Server reply by user ' + req.connection.user})
    });


// Start server
var port = process.env.PORT || 3002;
server.listen(port, function () {
  console.log('Express server listening on port %d in %s mode', port, app.get('env'));
});

React App.js 代码是

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: "Not known",
      localdata:"local status",
      status:"not set",
    };
  }
  componentDidMount() 
  {
    fetch('http://192.168.7.179:3002/',{
      method: 'GET', // *GET, POST, PUT, DELETE, etc.
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then(response => 
        {
          this.state.status = response.status;
          return response.text();
        }
      )
      .then(msg => 
        this.setState({ msg })
        );
  }
  render() {
    return (

      <div className="App"> 
      <div> LocalData is  - {this.state.localdata}</div>
      <div> Server data is - {this.state.msg} </div> 
        api call status is  - { this.state.status } 
      </div>
    );
  }
}

export default App;

在上面的代码中，如果你从浏览器调用 API，你会得到正确的回复

http://192.168.7.179:3002/

{"msg":"************  Server reply by user IUYT\\user1"}

但是，来自 react 应用

LocalData is - local status
Server data is -
api call status is - 401

在 F12 窗口中

Failed to load resource: the server responded with a status of 401 (Unauthorized)

请建议从 React 应用调用所需的更改。

Answer 1

昨天经过研究终于有了突破。所以想回答我自己的问题。

在我的示例中需要更改 5 点。

1. 我们需要使用 IP 地址或域来引用客户端和服务器 用于交流目的。所以我改变了所有的api调用来源 提及他们各自的 IP 地址。(localhost -> 192...)

2. 在 cors 中，我们需要提及 IP 地址和端口号作为来源

3. 在客户端调用中，如果我们使用 fetch 使用凭据：include 或者如果 axios 使用 withCredentials：true
4. 在服务器中，cors 必须知道来源，所以在端口中包含您的客户端 ip
5. 使用 express-ntlm 或 node-sspi 作为 Windows 身份验证器。

因此，示例中我的代码的全部更改是，

在服务器端

    var corsOptions = {
    origin: 'http://192.168.7.179:3001',
    credentials: true,
    authenticate: true,
    authorization: true,
    optionsSuccessStatus: 200 
    }
    app.use(cors(corsOptions))

而不是

 app.use(cors())

并在客户端添加 'credentials: 'include'' 作为获取参数。

改变

fetch('http://192.168.7.179:3002/',{
      method: 'GET', // *GET, POST, PUT, DELETE, etc.
      headers: {
        'Content-Type': 'application/json',
      }
    })

到

fetch('http://192.168.7.179:3002/',{
      method: 'GET', // *GET, POST, PUT, DELETE, etc.
      credentials: 'include'
    })

就是这样，首先运行 api，然后在您启动 react 应用程序时启动，您将收到 windows auth 提示。 填写您的域凭据，服务器将获取结果。

步骤 1. 在浏览器中查看服务器是否正在运行 -> http://192.168.7.179:3002/

{"msg":"************ 服务器回复用户 IUYT\user1"}

1. 签到http://localhost:3001/结果是

LocalData 是 - 本地状态

服务器数据 - 未知

api 调用状态 - 未设置

但是

1. 在浏览器中查看客户端是否正在运行 -> http://192.168.7.179:3001/

LocalData 是 - 本地状态

服务器数据是 - {"msg":"************ 服务器回复用户 IUYT\user1"}

api 调用状态为 - 200