在使用CORS时如何将html，css和js作为后响应？-电脑我帮您

在使用CORS时如何将html，css和js作为后响应？

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

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

我正在使用webpack进行SSR，并认为它的工作原理几乎相同，但是效果不一样。

这里是我到目前为止所拥有的...这只是从我的react组件返回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 = hbspile(theHtml);
  const reactComp = renderToString(<App />);
  const htmlToSend = hbsTemplate({ reactele: reactComp });
  res.send(htmlToSend);
});

以上方法有效，并且仅在没有js，css事件处理程序等的情况下返回。这是应用程序组件

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=""
          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。只是不通过其他域的发帖请求。我认为我缺少一些基本知识，例如如何维护dom和如何运行脚本。

回答如下：

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

在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

访问