时间戳

首页 > 解决方案 > 使用 CORS 时如何将 html、css 和 js 作为发布响应提供服务？

node.js - 使用 CORS 时如何将 html、css 和 js 作为发布响应提供服务？

问题描述

试图了解通过 Post 请求将 html、css、js 文件发送回客户端的最佳方法。我正在运行快递，反应。

到目前为止，我所拥有的是一个基本的发布路线，它返回带有数据（使用把手）作为响应的已编译组件。但是，没有事件处理程序、css 和 js。我不确定如何将这些与 HTML 一起作为对另一个域上的 AJAX POST 请求的响应。

我正在将 webpack 用于 SSR，并认为这会起到很大的作用，但事实并非如此。

这是我到目前为止所拥有的......这只是从我的反应组件返回 html。

app.post("/", async (req, res) => {
  const theHtml = `
  <html>
  <head><title>My First SSR</title>
  <link href='http://localhost:8080/app.css'></link>
  <script src="http://localhost:8080/app.js" charset="utf-8"></script>
  <script src="http://localhost:8080/vendor.js" charset="utf-8"></script>
  </head>
  <body>
  <h1>My First Server Side Render</h1>
  <div id="reactele">{{{reactele}}}</div>
 </body>
  </html>
  `;

  const hbsTemplate = hbs.compile(theHtml);
  const reactComp = renderToString(<App />);
  const htmlToSend = hbsTemplate({ reactele: reactComp });
  res.send(htmlToSend);
});

上面的工作，只返回没有 js，css 事件处理程序等。这里是 App 组件

class App extends React.Component {
  constructor() {
    super();
    this.handleButtonClick = this.handleButtonClick.bind(this);
    this.handleTextChange = this.handleTextChange.bind(this);
    this.handleReset = this.handleReset.bind(this);

    this.state = {
      name: "",
      msg: ""
    };
  }

  //Handlers
  handleButtonClick = e => {
    const nameLen = this.state.name.length;
    if (nameLen > 0) {
      this.setState({
        msg: `You name has ${nameLen} characters including space`
      });
    }
  };

  handleTextChange = e => {
    this.setState({ name: e.target.value });
  };

  handleReset = () => {
    this.setState({ name: "", msg: "" });
  };
  //End Handlers

  render() {
    let msg;

    if (this.state.msg !== "") {
      msg = <p>{this.state.msg}</p>;
    } else {
      msg = "I have a state of none";
    }
    return (
      //do something here where there is a button that will replace the text
      <div>
        <header className="App-header">
        {/* <img src={logo} className="App-logo" alt="logo" /> */}

        {/* <img src={logo} className="App-logo" alt="logo" /> */}
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
        <label>Your name </label>
        <input
          type="text"
          id="txtName"
          name="txtName"
          value={this.state.name}
          onChange={this.handleTextChange}
        />
        <button id="btnSubmit" onClick={this.handleButtonClick}>
          Calculate Name Length
        </button>
        <button id="btnReset" onClick={this.handleReset}>
          Reset All
        </button>
        <hr />
        {msg}
      </div>
    );
  }
}
export default App;

在客户端，我只是将 html 附加到空白页面。几个问题，

如何维护请求的 html 上的事件处理程序？如何同时发送 .css 和 .js ？

在某些情况下，我想避免在我的前端服务器上放置和维护“客户端”代码？我希望像 webpack 这样的东西会为我处理这个问题？

感谢您的任何提示/建议。

编辑:: 如果我直接访问该路线，澄清这一点。我得到了相关的 js 和 css。只是不是通过来自另一个域的发布请求。我假设我缺少一些基本的 udnerstanding dom 是如何维护和脚本运行的。

标签： node.jsreactjsexpress

解决方案

您只需要一个静态目录和一个视图渲染器。

在您的 app.js 或您初始化 express 实例的任何地方，添加以下内容

var hbs = require('hbs');
var path = require('path');
var express = require('express');

var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

现在您可以将您的 html 放入名为“views”的文件夹中的 hbs 文件中，然后将其返回

app.post("/", (req, res) => {
 res.render('index.hbs', {variable: 'value'});
});

对于静态资产，添加以下行

app.use(express.static(path.join(__dirname, 'public')));

并将您的 js 和 css 或图像或任何您想要的静态文件放在项目根目录中名为“public”的文件夹中。这些可以通过http://localhost:8080/app.js访问

推荐阅读