从 Chrome 扩展程序获取数据到 Vercel 上托管的后端时出现 401 未经授权的错误

Question

我正在构建一个 Chrome 扩展程序，需要从维基词典获取数据。 由于 CORS 限制，我无法直接从 Chrome 扩展程序向维基词典发出请求。因此，我想使用 Vercel 上托管的代理后端来处理这些请求并将数据发送回扩展程序。 这是我当前的后端 server.js：

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const fetch = require('node-fetch'); 
const app = express();
const PORT = process.env.PORT || 3000;

// Allow CORS for my Chrome extension
app.use(cors({
  origin: ['chrome-extension://my-extension-id'], 
  methods: ['GET', 'POST', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
}));

app.use(bodyParser.json());
app.use(express.static('public'));

// Health check route
app.get('/', (req, res) => {
  res.send('mainpage');
});

// Proxy route to fetch data from Wiktionary
app.get('/proxy/:word', async (req, res) => {
  const word = req.params.word
    .replaceAll('ō', 'o')
    .replaceAll('ā', 'a')
    .replaceAll('ī', 'i')
    .replaceAll('ū', 'u');
  try {
    const response = await fetch(`https://en.wiktionary.org/wiki/${word}`);
    if (!response.ok) {
      throw new Error('Failed to fetch data from Wiktionary');
    }
    const text = await response.text(); 
    res.send(text); 
    console.log(`Successfully fetched data for word: ${word}`);
  } catch (error) {
    console.error('Error fetching from Wiktionary:', error);
    res.status(500).send('Error fetching from Wiktionary');
  }
});

// Start the server
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

这是使用后端的前端代码片段

fetch(`https://myappbackendurlexample.vercel.app/fetch/${word}`)
          .then(response => response.text())
          .then(html => {
            const parser = new DOMParser();
            const baseDoc = parser.parseFromString(html, 'text/html');
            //following implementations
          })

还有我的manifest.json

{
//related fields
  "manifest_version": 3,
  "permissions": ["storage","https://myappbackendurlexample.vercel.app/*"],
  "host_permissions": ["https://myappbackendurlexample.vercel.app/*"],
  "content_security_policy": {
    "script-src": "'self'",
    "object-src": "'self'"
  },
  "background": {
    "service_worker": "server.js"
  }
  
}

但是，即使我的后端可以成功从维基词典获取数据，我的前端总是有 这些错误，因为后端可能不让前端访问。

从源“chrome-extension://extension_ID”获取“https://myappbackendurlexample.vercel.app/fetch/gestarum”的访问已被 CORS 策略阻止：没有“Access-Control-Allow-Origin”标头存在于所请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。了解此错误 myappbackendurlexample.vercel.app/fetch/gestarum:1

无法加载资源：net::ERR_FAILED了解这个错误 Inflections.js：17

未捕获（承诺中）类型错误：无法获取 在 HTMLButtonElement 处。 (Inflections.js:17:9)

由于chrome扩展不允许node，我尝试直接获取数据并将wikitionary添加到权限和host_permissions中。我单独发布了这个版本，它仍在审查中，所以我尝试使用这个本地版本和 vercel 后端。 我还尝试在我的 Express 服务器中设置代理路由以将请求转发到 wiktionayr 但实际上不起作用。 我检查了 Vercel 上的日志，但没有找到任何解释 401 未经授权错误的附加信息。 由于在本地主机上运行代码工作正常，我预计 Chrome 扩展程序能够向我的后端（托管在 Vercel 上）成功发出获取请求，这反过来又会从维基词典中获取数据并将其返回到扩展程序。

Answer 1

这个答案是基于我的理解，即您在本地主机中从第三方 API 查询数据时遇到问题。

如果您想在本地测试您的 API，并且您的请求由于跨源策略而被拒绝，请在本地

NODE_TLS_REJECT_UNAUTHORIZED

文件中将

0

环境变量设置为

.env

。

或者，您可以在上面共享的 server.js 文件中添加此行，

process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0';

请记住，不建议将此变量设置为

0

，并且切勿将其用于生产，因为它会禁用证书验证并使请求不安全。 您只需将目标域添加到经过验证的生产地址列表中即可。