如何让Axios获取的页面正常加载CSS？

你直接返回抓取的HTML时，页面里的CSS、JS等静态资源引用是相对路径（比如/css/main.css），浏览器会把当前域名（localhost:3000）作为基础路径去请求这些资源，而非原网站pointless.com，因此找不到资源导致CSS加载失败。

用Cheerio修改HTML里的所有静态资源引用，将其替换为原网站的绝对URL。同时注意不要在路由内部重复挂载静态资源中间件，应全局挂载。

修改后的代码如下：

console.log("Tribble-Webviewer is starting!")

const express = require('express')
const app = express()
const port = 3000
// 全局挂载静态资源中间件，不要放在路由里
app.use(express.static('public'))
app.use('/static', express.static('public'))

const cheerio = require('cheerio');
const axios = require('axios').default;
const targetUrl = 'https://pointless.com/';

app.get('/', (req, res) => {
    res.send('Hello World!')
})

app.get('/test', async (req, res) => {
    try {
        const { data } = await axios.get(targetUrl)
        const $ = cheerio.load(data)
        
        // 修改所有link标签的href属性，替换为原网站绝对URL
        $('link[rel="stylesheet"]').each((_, elem) => {
            const href = $(elem).attr('href')
            if (href && !href.startsWith('http')) {
                const absoluteHref = new URL(href, targetUrl).href
                $(elem).attr('href', absoluteHref)
            }
        })
        
        // 处理script标签的src属性，确保JS也能加载
        $('script[src]').each((_, elem) => {
            const src = $(elem).attr('src')
            if (src && !src.startsWith('http')) {
                const absoluteSrc = new URL(src, targetUrl).href
                $(elem).attr('src', absoluteSrc)
            }
        })
        
        // 返回修改后的HTML
        res.send($.html())
    } catch (err) {
        console.error(err)
        res.status(500).send('抓取失败')
    }
})

app.listen(port, () => {
  console.log(`Tribble-Pro is listening on port ${port}`)
})

• 用new URL(href, targetUrl)可自动处理相对路径转绝对路径，不管是/xxx还是../xxx格式都能正确转换。
• 除CSS外，JS、图片等资源也需做同样处理，否则也会加载失败。
• 不要在app.get('/')路由里挂载app.use，中间件应在路由定义前全局挂载，避免重复注册或不生效。

内容的提问来源于stack exchange，提问作者Lucas Rausch