本地环境如何绕过Imgur接口的CORS跨源资源共享限制？

以下是我使用Ajax和jQuery编写的代码：

var image = new Image();
image.onload = function () {
    screenResolution = JSON.parse(screenResolution);
    const width = (screenResolution.x);
    const height = (screenResolution.y);
    canvas.width = width;
    canvas.height = height;
    context.drawImage(image, 0, 0);
    const imageConvBase = canvas.toDataURL("image/jpeg", 1);
    
    $.ajax({
            url: "https://api.imgur.com/3/upload",
            method: "POST",
            timeout: 0,
            headers: {
                Authorization: 'Client-ID {REMOVED FOR STACKOVERFLOW}'
            },
            data: {
                image: imageConvBase,
                type: "base64",
            },
            processData: false,
            mimeType: "multipart/form-data",
            contentType: false,
            error: function(response) {
                console.log("AJAX Error: " + JSON.stringify(response));
            },
            success: function(response) {
                if (response.success) {
                    console.log(response.data.link);
                }
            }
        });
}
image.src = imgURL;

运行时出现如下错误：

[1124/143540.368:INFO:CONSOLE(0)] "Access to XMLHttpRequest at 'https://api.imgur.com/3/upload' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

必须在本地运行，无法部署到服务器，求解决该跨域问题的方法。

本地环境下的解决方法 #

1. 浏览器启动时禁用CORS检查 #

这是最快的临时调试方案：

• Chrome/Edge：
  右键浏览器快捷方式 → 属性 → 在「目标」栏末尾添加 --disable-web-security --user-data-dir="C:/ChromeDevSession"（注意前面有空格），保存后启动浏览器。该方式会创建独立调试会话，不影响正常浏览配置。
• Firefox：
  地址栏输入 about:config → 搜索 security.fileuri.strict_origin_policy → 将值改为 false，重启浏览器即可。

2. 搭建本地代理服务器转发请求 #

用Node.js快速搭建代理，通过本地服务器转发请求绕开CORS限制：

1. 新建文件夹，创建 proxy.js 文件：

const express = require('express');
const request = require('request');
const app = express();
const port = 3000;

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.post('/upload-imgur', (req, res) => {
    const options = {
        url: 'https://api.imgur.com/3/upload',
        method: 'POST',
        headers: {
            'Authorization': req.headers.authorization,
        },
        formData: req.body
    };
    request(options, (err, response, body) => {
        if (err) return res.status(500).send(err);
        res.send(body);
    });
});

app.listen(port, () => {
    console.log(`代理服务器运行在 http://localhost:${port}`);
});

2. 执行 npm install express request 安装依赖，然后运行 node proxy.js。
3. 修改原代码中的Ajax请求URL为 http://localhost:3000/upload-imgur，其他参数保持不变即可。

3. 改用隐藏表单提交（无需Ajax） #

如果不想用代理或修改浏览器设置，可以尝试表单提交：

// 替换原Ajax部分的代码
const form = document.createElement('form');
form.style.display = 'none';
form.method = 'POST';
form.action = 'https://api.imgur.com/3/upload';
form.enctype = 'multipart/form-data';

// 添加参数
const imageInput = document.createElement('input');
imageInput.type = 'hidden';
imageInput.name = 'image';
imageInput.value = imageConvBase;
form.appendChild(imageInput);

const typeInput = document.createElement('input');
typeInput.type = 'hidden';
typeInput.name = 'type';
typeInput.value = 'base64';
form.appendChild(typeInput);

document.body.appendChild(form);
form.submit();

注意：表单无法直接携带自定义Authorization头，此方法需配合浏览器禁用CORS，优先推荐前两种方案。

内容的提问来源于stack exchange，提问作者sckindvl