Vue.js如何接收Greasemonkey脚本发送的外部POST请求数据？

首先，你看到的Cannot POST /service错误说明你的本地后端服务（localhost:8080）根本没配置/service路径的POST请求处理路由——这是核心问题，得先搞定这个，不然不管是Greasemonkey还是Vue都没法正常交互。

第一步：配置后端POST路由（以Express为例） #

假设你用Node.js + Express作为后端（Vue项目最常用的后端搭配之一），需要添加一个POST路由来接收页面URL和名称：

// 后端入口文件（比如server.js）
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors'); // 处理跨域，Vue可能跑在不同端口
const app = express();

// 解析JSON格式的请求体（必须，否则拿不到POST数据）
app.use(bodyParser.json());
// 允许跨域请求（如果Vue和后端不在同一端口）
app.use(cors());

// 配置POST /service路由
app.post('/service', (req, res) => {
  // 从请求体获取Greasemonkey发送的URL和页面名称
  const { url, name } = req.body;
  
  // 这里可以做存储操作：比如写入数据库、本地文件等
  console.log('收到新书签数据:', { url, name });
  
  // 返回成功响应
  res.status(200).json({
    success: true,
    message: '书签数据已接收',
    data: { url, name }
  });
});

// 启动服务
app.listen(8080, () => {
  console.log('后端服务运行在 http://localhost:8080');
});

配置好后重启后端，再用Postman测试POST请求：发送JSON格式的{"url": "test.com", "name": "测试页面"}，应该就能收到正常响应了。

第二步：修正Greasemonkey脚本的请求格式 #

你的脚本需要正确设置请求头和数据格式，否则后端无法解析：

// Greasemonkey脚本示例
// ==UserScript==
// @name         提交当前页面到书签服务
// @namespace    your-namespace
// @version      0.1
// @description  把当前页面的URL和标题发送到本地书签服务
// @match        *://*/*
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function() {
    'use strict';

    const currentUrl = window.location.href;
    const currentTitle = document.title;

    // 发送POST请求
    GM_xmlhttpRequest({
        method: 'POST',
        url: 'http://localhost:8080/service',
        headers: {
            'Content-Type': 'application/json' // 必须设置，告诉后端是JSON数据
        },
        data: JSON.stringify({ url: currentUrl, name: currentTitle }),
        onload: function(response) {
            console.log('提交成功:', response.responseText);
            alert('页面已添加到书签服务！');
        },
        onerror: function(err) {
            console.error('提交失败:', err);
            alert('提交失败，请检查后端服务是否运行！');
        }
    });
})();

第三步：在Vue.js中处理POST数据 #

分两种常见场景：

场景1：Vue前端调用接口发送/获取数据 #

如果你的Vue项目是书签管理的前端页面，可以用fetch或Axios来交互：

<template>
  <div class="bookmark-app">
    <h2>手动添加书签</h2>
    <input v-model="newUrl" placeholder="输入页面URL" />
    <input v-model="newName" placeholder="输入页面名称" />
    <button @click="submitBookmark">提交</button>

    <h2>我的书签列表</h2>
    <ul>
      <li v-for="bookmark in bookmarks" :key="bookmark.url">
        <a :href="bookmark.url" target="_blank">{{ bookmark.name }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newUrl: '',
      newName: '',
      bookmarks: []
    };
  },
  methods: {
    async submitBookmark() {
      try {
        const response = await fetch('http://localhost:8080/service', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            url: this.newUrl,
            name: this.newName
          })
        });
        const result = await response.json();
        console.log('添加成功:', result);
        // 清空输入框并刷新列表
        this.newUrl = '';
        this.newName = '';
        this.getBookmarks();
      } catch (err) {
        console.error('添加失败:', err);
        alert('添加失败，请检查服务状态！');
      }
    },
    async getBookmarks() {
      // 假设后端有GET接口返回所有书签数据
      try {
        const response = await fetch('http://localhost:8080/service');
        this.bookmarks = await response.json();
      } catch (err) {
        console.error('获取书签失败:', err);
      }
    }
  },
  mounted() {
    // 页面加载时获取已有书签
    this.getBookmarks();
  }
};
</script>

场景2：Vue SSR（比如Nuxt.js）中获取POST数据 #

如果是服务端渲染模式，可以在服务器中间件中直接处理POST请求：

// Nuxt.js的serverMiddleware示例
export default function(req, res) {
  if (req.method === 'POST' && req.url === '/service') {
    let body = '';
    req.on('data', chunk => {
      body += chunk.toString();
    });
    req.on('end', () => {
      const bookmarkData = JSON.parse(body);
      console.log('收到POST数据:', bookmarkData);
      res.end(JSON.stringify({ success: true }));
    });
  }
}

最后提醒：如果Vue前端和后端不在同一端口，一定要在后端配置CORS，否则浏览器会拦截跨域请求。

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