用外部资源表示静态资产

Question

我使用Express来服务静态资产。前端是AngularJS 1。我已经启用了html5mode。尝试实现Recaptcha是我在Chrome开发工具中注意到以下内容:

Uncaught SyntaxError: Unexpected token <</p>

api.js ? onload = vcRecaptchaApiLoaded&呈现=明确":1

当我点击函数启动Recaptcha过程时，我收到:

错误:reCaptcha尚未加载。

到目前为止，这是有意义的，因为我注意到第一个错误报告的字符串是从谷歌加载Recaptcha的url路径的一部分。

当我点击url (api.js?onload=vcRecaptchaApiLoaded&render=explicit ":1)在chrome工具它加载我的index.html!奇怪!

我认为这与我的静态资产服务有关。我一直在摆弄我的快递服务员，直到奶牛回家，却想不出如何补救。

生活的例子:http://ninjacape.herokuapp.com

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

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中的任何url附加到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');
  }
});