Question

我使用Express来提供静态资产。前端是AngularJS 1.x，我启用了html5mode。尝试实施Recaptcha是我在Chrome开发工具中注意到以下内容的地方：

未捕获的SyntaxError：意外的标记＆lt;

api.js的onload = vcRecaptchaApiLoaded＆安培;渲染=显式的“：1

当我点击该功能启动Recaptcha流程时，我收到：

错误：尚未加载reCaptcha。

到目前为止，这是有道理的，因为我注意到第一个错误报告的字符串是从Google加载Recaptcha的网址路径的一部分。

当我点击chrome工具中的url（api.js？onload = vcRecaptchaApiLoaded＆amp; render = explicit“：1）时，它会加载我的index.html！奇怪！

这一点相信它与我的静态资产服务有关。我一直玩我的快递服务器，直到奶牛回家，无法弄清楚如何补救。

实例： Windows Holographic FAQ

这是我的代码，谢谢你看看！

的index.html

<script src=“https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit“ async defer></script>

express.js

var express = require('express');
var compression = require('compression');
var app = module.exports.prod = exports.prod = express();

var devAPI = 'http://localhost:1337';

app.use(compression());

app.use(express.static('.tmp'));

app.get('/*', function(req, res) {
  res.sendFile(__dirname + '/.tmp/index.html');
});

var proxy = require('express-http-proxy');
app.use('/api', proxy(devAPI));

var port = process.env.PORT || 8000;
app.listen(port);

Answer 1

嗯......我希望我有更好的答案但是我很高兴我得到了它的工作。我静态提供文件的方式是将index.html中的任何网址追加到http://localhost:8000。为了解决这个问题，我看了一下Express中的实际请求并找到了url。然后添加逻辑以将该请求重定向到真实URL。有关详细信息，请参阅下面的注释代码：

// Any requests matching /* 
app.get('/*', function(req, res, next) {

  // Log the original url express is tying to go to
  console.log(req.url);

  // This is the url found from the step above (Where are the extra characters coming from?!)
  var url ='/%E2%80%9Chttps://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit%E2%80%9C'

  // Self explanatory
  if (req.url === url) {

    // Respond by redirecting the request
    res.redirect('https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit')

    //End this block and continue
    next();

  } else {

    // If it doesn't match the above url, proceed as normal
    res.sendFile(__dirname + '/.tmp/index.html');
  }

});

具有外部资源的快速和静态资产

1 个答案: