浏览器扩展 - 使用 axios 的 CORS 代理错误

Question

我正在使用 GimmeProxy api 来获取我想在我的 vue chrome 扩展中使用的代理。不幸的是我得到这个错误：

Access to XMLHttpRequest at 'https://gimmeproxy.com/api/getProxy?get=true&supportsHttps=true&anonimityLevel=1&protocol=http' from origin 'chrome-extension://eamofepokjbdhndoegnmcnmgjhefhhlh' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是我的 vuex 操作中的代码：

    fetchProxyData({ commit }) {
      axios({
        method: 'get',
        baseURL: 'https://gimmeproxy.com/api/getProxy',
        params: {
          get: true,
          supportsHttps: true,
          anonimityLevel: 1,
          protocol: 'http'
        },
        headers: {
          'Access-Control-Allow-Origin': '*'
        }
      }).then( (response) => {
        console.log(response)
      })

有办法解决这个问题吗？

Answer 1

在您的代码示例中，您正试图将 CORS header 从客户端发送到服务器。

反之亦然。

客户端需要使用 'Access-Control-Allow-Origin': '*' header 来响应您的请求才能正常工作。

您能否使用 Chrome 开发工具网络选项卡检查服务器是否正在 return 从 GimmeProxy API 进行正确的访问控制 header。

编辑：经过进一步检查，我似乎没有在这个 API 端点上看到访问控制 header。

在这种情况下，您需要做的是设置您自己的 API 端点作为中间人：

在 VPS（或 AWS lambda 函数）上设置 Express API。
创建一个向 gimmeproxy 发出请求的端点。
您的 Chrome 扩展程序通过 Axios 向此端点发出请求。
端点通过 Axios 向 gimmeproxy API 发出请求（它不是浏览器，因此不强制执行跨源策略）。
您的 API return 是对客户的回应。

请务必注意，您的 Express API 必须 return header 'Access-Control-Allow-Origin': '*' 或具有与您的扩展程序匹配的来源。

浏览器扩展 - 使用 axios 的 CORS 代理错误

browser extension - CORS proxy error using axios

proxy

firefox-addon

google-chrome-extension

cors

vue.js