react 在请求表达服务器后显示原始 json 数据

Posted 2023-02-22

【中文标题】react 在请求表达服务器后显示原始 json 数据

【英文标题】：react displays raw json data after request to express server

【发布时间】：2019-10-22 12:45:48

【问题描述】：

我想用 react-routes 配置我的 react js 后端。但我注意到我在 api 请求后得到了原始 json，我想这可能非常不安全。

一个人在这里发帖说：

“如果您的用户导航到提供 RAW JSON 的服务器路由，浏览器将接收 JSON 并在没有任何模板、样式或其他页面元素的情况下显示它。因此，您的服务器 URL 和客户端 URL 需要不同，并且您的服务器应使用专门标识为 API url 的 URL。许多人在这些 URL 前添加 /api/ 以避免混淆，或保护它们以使客户端无法直接请求它们。”

所以，我的“/”路径是 localhost:3000，它呈现“Home”组件，该组件在 localhost:3000/users 和 localhost:3000/about 上具有 Users 和 About 组件。 根据他的建议，我从这些嵌套组件中的每一个向“api/users”和“api/about”发出获取请求。一切正常，但如果我输入 localhost:3000/api/about 浏览器会显示原始 json 数据。那么我如何才能拥有不同的服务器 URL 和客户端 URL 而不会出现这个问题呢？

索引.js

render() 
    console.log(this.state);
    return(
      <div id="user">

        <Router>
        <ul>
          <li>
            <Link to="/about/">About</Link>
          </li>
          <li>
            <Link to="/users/">Users</Link>
          </li>
          <li>
            <Link to="/">Home</Link>
          </li>
        </ul>
      <Switch>
        <Route path="/" exact component=Home />
        <Route path="/about/" component=About />
        <Route path="/users/" component=Users />
      </Switch>
      </Router>

      </div>
    );
  

关于.js

componentDidMount() 
    fetch('/api/about')
      .then(res => 
        console.log(res);
        return res.json();
      )
      .then(msg => 
        console.log(msg);
        this.setState(msg, () => console.log('React fetch: successful'))
      );
  

server.js

const dir = path.join(__dirname, '../build');
app.use(express.static(dir));

app.get('/api/about', function(req, res) 
    const list = [
        "id": 1,
        "name": "Pizza",
        "price": "10",
        "quantity": "7"
    ,
    
        "id": 2,
        "name": "Cerveja",
        "price": "12",
        "quantity": "5"
    
];
     return res.json(list);
);

app.get('/*', function (req, res) 
  res.sendFile(path.join(__dirname, '../build', 'index.html'));
);

【问题讨论】：

我认为您收到的建议是为了让您将前端应用程序与后端应用程序分开。例如，您可以从 localhost:3000 运行前端应用程序，在 localhost:5000 运行后端应用程序。

我这样做了。我的前端应用在 localhost:3000 上运行，后端在 localhost:8015

但是如果你这样做了，获取：localhost:3000/api/about 应该不会返回任何内容，因为你的服务器在不同的端口上运行。

这是因为我在我的 webpack 开发服务器上使用了代理，它将每个请求从 localhost:3000(frontend webpack dev) 重定向到 localhost:8015(express server)。

在这种情况下，不要打扰。代理仅在开发模式下使用，因此在生产中不会发生。如果您只想在任何地方避免这种情况，您可以使用 env var 来设置 api url。 facebook.github.io/create-react-app/docs/…这是我通常做的。

【参考方案1】：

我认为这个问题更多地与 JSON 中的数据类型有关。如果不应该显示，那么为什么将其传递回前端？您真的可以混淆 api 端点是什么，但用户所要做的就是检查浏览器中的网络调用以找出它们。您也可以尝试对其进行加密，但由于前端会对其进行解密，因此只会延迟不可避免的情况。如果你真的想保护特定用户的数据，那么你必须有一个登录和会话处理机制。