Экспресс и статические активы с внешними ресурсами

Question

Я использую Express для обслуживания статических активов. Frontend - это AngularJS 1.x, и у меня включен html5mode. Попытка реализовать Recaptcha где я заметил следующее в Chrome Дев инструментов:

Uncaught SyntaxError: Unexpected token <

api.js?onload=vcRecaptchaApiLoaded&render=explicit“:1

Когда я нажимаю на функцию, чтобы начать процесс ReCaptcha я получаю:

Error: reCaptcha has not been loaded yet.

До сих пор это имеет смысл быть bacause Я заметил, что строка, о которой сообщает первая ошибка, является частью пути URL для загрузки Recaptcha из Google.

Когда я нажимаю на URL-адрес (api.js? Onload = vcRecaptchaApiLoaded & render = explicit ": 1) в хром-инструментах он загружает мой 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

Ну ... Я бы хотел ответить лучше, однако я просто счастлив, что я получил его на работу. Что-то вроде того, что я статически подаю файлы, добавляет любой url в 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'); 
    } 

});