能否通过AJAX请求运行Puppeteer？Chrome扩展调用Puppeteer方案咨询

需求可行性说明 #

这个方案完全可以实现，是Chrome扩展调用Puppeteer执行无头任务的主流可行方案，完美避开puppeteer-web不支持无头模式的限制。

405错误原因排查 #

你的报错是多个配置错误共同导致的：

• 你定义的CORS路由没有挂载到express服务实例上，CORS配置完全不生效，OPTIONS预检请求没有被正确处理
• 根路径仅注册了GET请求的处理逻辑，前端发送的是POST请求，服务端不支持对应请求方法就会返回405
• 前端请求路径写错误，你请求的是../src/pages.js静态文件路径，express静态资源服务默认不允许POST请求访问静态文件，直接拦截返回405

修复步骤 #

1. 修复app.js配置 #

// 替换你的原有app.js代码如下
const express = require('express');
const path = require('path');
const pages = require('./pages');
const server = express();

// 全局挂载CORS中间件，直接生效无需单独router
server.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");
  res.header("Access-Control-Allow-Methods", "PUT, GET,POST,OPTIONS");
  // 预检请求直接返回200
  if(req.method.toLowerCase() === 'options') {
    return res.sendStatus(200);
  }
  next();
});

server 
.use(express.urlencoded({extended:true}))
.use(express.json()) // 新增JSON解析，后续传参可直接用req.body获取
.use(express.static('public'))
.use('/jquery',express.static(path.join(__dirname+'/node_modules/jquery/dist/')))

.set('views',path.join(__dirname,"views"))
.set('view engine','hbs')
 
// 同时支持GET、POST请求触发Puppeteer任务
.get('/', pages.index)
.post('/', pages.index)
 
.listen(process.env.PORT || 5502, () => {
  console.log('服务已启动，访问地址：http://localhost:5502')
}) 

2. 修复pages.js逻辑 #

你的原有index函数没有接收请求响应参数，也没有返回响应、关闭浏览器实例，会导致内存泄漏和请求超时：

const puppeteer = require('puppeteer');

module.exports = {
    index: async function follow(req, res){
            try{
            const browser = await puppeteer.launch({
                headless:true,
                args:["--no-sandbox",'--disable-setuid-sandbox']
            });
        
            const page = await browser.newPage();
            await page.setDefaultNavigationTimeout(0);
            await page.goto("https://www.instagram.com/");

            // 此处填写你自己的Puppeteer执行逻辑
            // .....

            // 执行完成后关闭浏览器实例
            await browser.close();
            // 返回执行结果给前端
            return res.send('Puppeteer任务执行完成');
        } catch (err) {
            console.error('任务执行出错：', err);
            return res.status(500).send('任务执行失败：' + err.message);
        }
    }
}

3. 修复前端请求代码 #

不要请求pages.js静态文件，直接请求你启动的本地服务接口地址：

<script>
        const xhr = new XMLHttpRequest();
        xhr.onload = () => {
            if(xhr.status === 200){
                console.log('请求成功：', xhr.responseText);
            }else{
                console.log("请求失败，状态码：", xhr.status)
            }
        }
        // 替换为你本地服务的实际地址
        xhr.open("POST", "http://localhost:5502/");
        xhr.send(null);
</script>

4. Chrome扩展额外配置 #

如果是在Chrome扩展中发送请求，需要在扩展的manifest.json中添加服务地址的访问权限，避免扩展跨域拦截：

{
  "host_permissions": ["http://localhost:5502/*"]
}

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