当使用节点 js api 时，如何尊重 React js 前端应用程序的 windows 使用

Question

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

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

到目前为止，我能够编写基于 express 的节点 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

F12window

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

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

Answer 1

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

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

我们需要用 IP 地址或域来引用客户端和服务器出于沟通目的。所以我改变了所有 api 呼叫来源提到它们各自的 IP 地址。(localhost -> 192...)
在cors中，我们需要提到IP地址和端口号作为来源
在客户端调用中，如果我们使用 fetch 使用 credentials: include 或者如果 axios 使用 withCredentials: true
在服务器中，cors 必须知道来源，所以包括你的客户端 ip 和端口
使用 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())

并在客户端添加“凭据：'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 授权的提示。填写您的域凭据，服务器将获取结果。

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

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

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

LocalData 是 - 本地状态

服务器数据 - 未知

api 呼叫状态为 - 未设置

但是

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

LocalData 是 - 本地状态

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

api 通话状态为 - 200

当使用节点 js api 时，如何尊重 React js 前端应用程序的 windows 使用

how to honor windows use from React js front end application when node js api is used

node.js

reactjs

sspi