在Express.js服务器中，如何发送从HTTP请求获取的HTML(带有样式和js)作为响应? [英] In an Express.js server, how can I send an HTML (with style and js) acquired from a HTTP request, as a response?

问题描述

这是一个Express.js服务器.我正在尝试验证我的Instagram API.

This is an Express.js server. I'm trying to authenticate my Instagram API.

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const axios = require('axios');
const ejs = require('ejs');
var app = express();

//  bodyparser middleware setup
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());



var instagramClientId = '123123';

app.get('/instagram', (req, res) => {
    axios({
        method: 'post',
        url: `https://api.instagram.com/oauth/authorize/?client_id=${instagramClientId}&redirect_uri=REDIRECT-URI&response_type=code`,
      }).then((response) => {

    res.send(response.data);
    console.log(response.data);


        }).catch((e) => {
              console.log(e);
          });
});

// port set-up
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`app fired up on port ${port}`);
});

这是我得到的错误.似乎html文件已发送完，但未执行css和js.您可以看到错误消息全部与样式和js有关.

这是因为我需要在res.send()代码中启用某些选项吗?

推荐答案

在这里我要回答两个问题，第一个是我认为您实际遇到的问题，第二个是技术上的答案这个问题.

I'm going to answer two questions here, the first is what I think you're actually having problems with and the second is what would technically be the answer to this question.

我认为您的实际问题是:对OAuth2.0的误解

查看您的代码，似乎您正在尝试使用户通过Instagram进行身份验证.太好了，OAuth2.0非常棒，是目前进行身份验证的好方法，但是您对实现该方法的认识不正确.OAuth2.0与重定向有关，而不是向用户代理HTML.在这种情况下，您似乎正在使用axios对instagram OAuth端点进行服务器端调用，然后向用户发送该HTML.您实际上应该做的是将用户重定向到您构建的Instagram URL.

Looking at your code, it looks like you're trying to get a user to authenticate with Instagram. This is great, OAuth2.0 is fantastic and a good way to authenticate at the moment, but you've got the wrong end of the stick with how to implement it. OAuth2.0 is about redirects, not proxying HTML to the user. In this case it looks like you're using axios to make a server side call to the instagram OAuth endpoint and then sending the user that HTML. What you should actually be doing is redirecting the user to the Instagram URL you've built.

以下是您所要进行的舞蹈"的高水平.

A high level of the "dance" you go through is the following.

1. 用户要求通过在您的网站上按一个按钮来登录instagram.
2. 您将用户发送到instagram URL，该URL包含您的应用程序令牌以及批准的"重定向URL.用户使用Instagram登录后，Instagram会将用户重定向到您批准的重定向URL.
3. 用户浏览器现在已重定向到服务器上的第二个端点，该端点从Instagram接收一次性令牌.您可以在服务器端使用该令牌，然后使用axios(或类似方法)发出服务器端请求以获取一些用户信息，例如其个人资料.拥有这些数据后，您可以根据需要在数据库中创建一个用户，并向他们发出新的会话令牌.与此相关的配置文件调用，您还将获得直接给您的令牌(与用户浏览器给您的令牌不同)，该令牌将使您可以向Instagram API发出请求，以获取最初向用户请求的特权

这意味着您在服务上有2个端点，您好，我想用instagram登录，请将我重定向到instagram登录页面"，然后您好，instagram表示我很好，并给予了我用这个令牌来证明这一点，您现在可以直接与他们核对"(这是回调端点).

This means you have 2 endpoints on your service, the "hello, I'd like to log in with instagram, please redirect me to the instagram login page" and then "hello, instagram said I'm all good and gave me this token to prove it, you can now check with them directly" (this is the callback endpoint).

您可以手动管理整个过程，这对于理解OAuth非常有用，或者您可以使用Passport.js之类的东西来为您抽象.这使您可以在几个地方注入自己的逻辑，并为您处理很多来回舞蹈.在这种情况下，我可能建议您自己处理它，以了解其工作原理.

You can manage this whole process manually which is great for understanding OAuth, or you can use something like Passport.js to abstract this for you. This lets you inject your own logic in a few places and handles a lot of the back and forth dance for you. In this instance, I'd probably suggest handling it yourself to learn how it all works.

最终，您不会通过res.send或类似方式向用户发送任何HTML.相反，您的第一个端点仅使用 res.redirect(instagramUrl).因此，您也不会在此部分中发出任何HTTP请求，而是在他们使用Instagram输入用户名和密码后在回调"上进行操作.

Ultimately, you are not sending the user any HTML via res.send or anything similar. Instead your first endpoint simply uses a res.redirect(instagramUrl). You also thus do not make any HTTP requests during this portion, you do that on the "callback" after they've entered their username and password with Instagram.

从技术上讲，此问题的正确答案是:代理JS和CSS调用，但这确实对安全性不利！

在这种情况下，您是从第三方发送一些HTML的.因此，您还需要允许用户访问HTML和CSS.从安全角度来看，这还很不稳定，您应该真正考虑不这样做，因为这是不好的做法.该页面中的所有JS和CSS链接都是最可能的相对链接，这意味着它们向您询问您未托管的JS和CSS.最好的选择是找到这些确切的路径(即:/js/app.min.js )，然后代理这些请求.因此，您将在服务上创建一个新端点，该端点将向instagrams /js/app.min.js 发出请求，然后使用 res.send 将其发送回去

You're sending some HTML from a 3rd party in this case. So you will need to also allow the user access to the HTML and CSS. Security wise, this is quite iffy and you should really consider not doing this as it's bad practice. All of the JS and CSS links in the page are most likely relative links, meaning they're asking you for some JS and CSS which you are not hosting. Your best bet is to find these exact paths (ie: /js/app.min.js) and to then proxy these requests. So you'll create a new endpoint on your service which will make a request to instagrams /js/app.min.js and then send that back down with res.send.

同样，请不要这样做，假装成为另一项服务是一个非常糟糕的主意.如果您需要instagram中的内容，请使用OAuth2.0对用户进行身份验证，然后使用其令牌和官方instagram API发出请求.

Again, please do not do this, pretending to be another service is a really bad idea. If you need something from instagram, use OAuth2.0 to authenticate the user and then make requests using their tokens and the official instagram API.

这篇关于在Express.js服务器中，如何发送从HTTP请求获取的HTML(带有样式和js)作为响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！