从 React 应用程序向 Google Drive API 发送 POST 请求时如何绕过 CORS 错误？

Question

我是网络开发新手，当我尝试将文件上传的 POST 请求从我的 React 应用程序发送到我的 Google Drive 帐户时，我无法绕过 CORS。这是我在上传文件回调函数中所做的：

function uploadFile(file) {
    var metadata = {
        'name': 'Test File', // Filename at Google Drive
        'mimeType': file.type, // mimeType at Google Drive
    };

    var accessToken = (copied generated access token from OAUTH playground)
    var form = new FormData();
    form.append('metadata', new Blob([JSON.stringify(metadata)], {type: 'application/json'}));
    form.append('file', file);

    var xhr = new XMLHttpRequest();
    xhr.open('post', 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id');
    xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
    xhr.responseType = 'json';
    xhr.onload = () => {
        console.log(xhr.response.id); // Retrieve uploaded file ID.
    };
    xhr.send(form);
}

我正在关注https://gist.github.com/tanaikech/bd53b366aedef70e35a35f449c51eced 的示例脚本，当我复制第一个示例脚本时，一切似乎都运行良好。但是，当我从桌面上传文件，然后通过我的应用上传时，我会收到 503 错误以及：

"... 已被 CORS 策略阻止。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin ... 不允许访问。"

我一直在检查 Stack Overflow 上提出的一些类似问题，似乎最好的方法是让托管资源的服务器启用 CORS。但在这种情况下，我向 Google 的 API 发出请求，那么处理这个问题的最佳方法是什么？特别是客户端解决方案？任何帮助表示赞赏

Answer 1

使用代理 https://cors-anywhere.herokuapp.com

所以你的网址将是 https://cors-anywhere.herokuapp.com/https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id'

在 Api Url 之前连接此 URL，否则在调用时将其发送到标头中

Access-Control-Allow-Origin:'*'