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

问题描述

我正在使用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)
      })

有没有办法解决这个问题？

解决方法

在您的代码示例中，您尝试将CORS标头从客户端发送到服务器。

需要反过来。

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

您可以使用Chrome Dev工具的“网络”标签检查服务器是否从GimmeProxy API返回了正确的访问控制标头。

编辑：进一步检查后，我似乎没有在此API端点上看到访问控制标头。

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

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

请注意，您的Express API必须返回标头'Access-Control-Allow-Origin': '*'或与扩展名相匹配的来源。