巧妙解决浏览器插件中的跨域问题：一个实用方案

在开发浏览器插件时，我们经常会遇到跨域资源共享（CORS）的问题。特别是当插件需要与外部API进行通信，而后端服务器又因安全考虑无法配置CORS时，这个问题就变得尤为棘手。本文将介绍一个巧妙的解决方案，通过利用Chrome扩展的特性来绕过跨域限制。

问题背景

我们开发了一个浏览器插件，插件中嵌入了一个系统项目，在项目中需要调用后端API，但是在外部网页中使用插件时，由于跨域限制，API调用会失败。传统的解决方案是在后端配置CORS，但出于安全考虑，这种方法并不适用于我们的情况。

解决方案概述

我们的解决方案主要包含三个部分：

前端请求拦截（request.js）
后台脚本（background.js）
内容脚本（content-script.js）

这个方案的核心思想是利用Chrome扩展的跨域能力，通过消息传递机制来代理API请求。

具体实现

1. 前端请求拦截（request.js）

现在的项目基本都会基于axios做一个请求的封装，在封装文件request.js中，我们通过环境变量判断，如果是插件环境，则走新的请求逻辑。关键点在于handlePluginRequest方法：

javascript 复制代码

async handlePluginRequest(options) {
    //每一个请求创建一个唯一的id。
  const uniqueId = Date.now() + Math.random().toString(36).substr(2, 9)
  const config = await this.requestInterceptor({ headers: {}, ...options })
  const headers = {
      "Content-Type": "application/json;charset=utf-8",
      "token":''
  }
  return new Promise((resolve, reject) => {
    const responseEventName = `ReceiveResponse-${uniqueId}`;
    const event = new CustomEvent('MakeRequest', {
      detail: {
        ...options,
        headers,
        url: this.service.defaults.baseURL + options.url,
        data: options.data || options.params || {},
        uniqueId: uniqueId,
      }
    });
    document.dispatchEvent(event);
    const handleResponse = (e) => {
        const { data, error } = e.detail;
        if (error) {
            //axios拦截器中的错误处理函数，这里不做实现，对实现没有影响
          this.errorInterceptor({ response: error });
          reject(error);
        } else {
          const response = { data: data };
         //axios的响应拦截器，对实现没有影响
          this.responseInterceptor(response);
          resolve(data);
        }
        document.removeEventListener(responseEventName, handleResponse);
      };
      document.addEventListener(responseEventName, handleResponse);
  });
}

这个方法创建了一个自定义事件，将API请求的详细信息作为事件数据发送出去。

2.请求的唯一性：避免响应混淆

在我们的解决方案中，每次API请求都会创建一个唯一的事件名。这个设计决策看似简单，实则解决了一个潜在的严重问题：多个并发请求导致的响应混淆。

为什么需要唯一事件名？

当插件同时发起多个API请求时，如果所有请求都使用相同的事件名，就会出现响应内容串扰的情况。具体来说：

响应匹配问题：如果多个请求使用相同的事件名，当响应返回时，前端无法确定哪个响应对应哪个请求。
数据完整性：错误的响应匹配可能导致数据被错误地处理，影响应用的正确性。
并发处理：在高并发情况下，使用相同的事件名会导致后来的响应覆盖先前的响应，造成数据丢失。

实现唯一事件名

在我们的代码中，唯一事件名的实现如下：

javascript 复制代码

const uniqueId = getUniqueId()
const responseEventName = `ReceiveResponse-${uniqueId}`;

getUniqueId()函数，这可以通过多种方式实现，例如使用时间戳加随机数，或者使用UUID库。

工作流程

每次发起请求时，生成一个唯一的uniqueId。
使用这个uniqueId创建特定的响应事件名（ReceiveResponse-${uniqueId}）。
请求通过内容脚本发送到后台脚本时，携带这个uniqueId。
后台脚本处理完请求后，响应带着相同的uniqueId返回。
内容脚本使用对应的响应事件名分发响应。

3. 后台脚本（background.js）

background.js作为中间人，负责接收来自内容脚本的消息，并执行实际的API请求：

javascript 复制代码

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "fetchData") {
    // 构建fetch请求选项
    const fetchOptions = {
      method: request.method.toUpperCase(),
      headers: request.headers,
    };

    // 构建URL和处理请求数据
    let url = request.url;
    if (request.method.toUpperCase() === 'GET' && request.data) {
      const queryParams = new URLSearchParams(request.data).toString();
      url += (url.includes('?') ? '&' : '?') + queryParams;
    } else if (request.data) {
      fetchOptions.body = JSON.stringify(request.data);
    }

    // 执行fetch请求
    fetch(url, fetchOptions)
      .then(response => response.json())
      .then(data => sendResponse({ data: data }))
      .catch(error => sendResponse({ error: error.toString() }));
    return true; // 保持消息通道开放
  }
});

4. 内容脚本（content-script.js）

content-script.js是连接前端和后台脚本的桥梁：

javascript 复制代码

function handleMakeRequest(e) {
  const { uniqueId } = e.detail;
  const responseEventName = `ReceiveResponse-${uniqueId}`;
  chrome.runtime.sendMessage({ action: "fetchData", ...e.detail }, function (response) {
    const event = new CustomEvent(responseEventName, { detail: response });
    document.dispatchEvent(event);
  });
}

document.addEventListener('MakeRequest', handleMakeRequest);

这个脚本监听来自前端的MakeRequest事件，将请求转发给后台脚本，然后将响应通过自定义事件传回前端。

工作流程

前端发起API请求时，request.js拦截请求并创建MakeRequest事件。
content-script.js监听到这个事件，将请求信息发送给background.js。
background.js接收请求信息，使用fetch执行实际的API调用。
background.js将API响应发送回content-script.js。
content-script.js创建ReceiveResponse事件，将响应数据传回前端。
前端接收响应数据，完成API调用过程。

总结

这个解决方案利用了Chrome扩展的特性，成功绕过了跨域限制。通过在不同脚本之间传递消息，我们实现了一个无需后端配置CORS的API代理机制。这种方法不仅解决了跨域问题，还保持了良好的代码组织结构，使得整个过程清晰可控。

这个方案特别适用于那些无法修改后端CORS配置，又需要在插件中进行API调用的场景。利用浏览器扩展的能力来解决web开发中的常见问题。