如何解决JavaScript Fetch API中的CORS错误：子域名JSON跨域请求失败问题

嘿，我来帮你把这个CORS的问题理清楚～你遇到的问题其实是对CORS机制的一个常见误解，咱们一步步来解决：

为什么你的请求头配置没用？ #

首先要明确：Access-Control-Allow-Origin是服务器返回给浏览器的响应头，不是客户端发送的请求头！

浏览器的CORS安全机制是这样的：当你从主域名请求子域名的资源时，浏览器会先检查服务器返回的响应里有没有这个头，确认当前域名被允许访问资源。你在请求里添加这个头，浏览器会直接忽略它，所以完全起不到作用。

为什么mode: 'no-cors'会导致状态码0和opaque响应？ #

设置mode: 'no-cors'后，浏览器会强制跳过CORS检查，但代价是完全限制你读取响应内容——你没法获取状态码、响应头，也不能解析JSON，这就是为什么你能“获取文件”但实际拿不到有用数据的原因，这个模式只适合不需要处理响应的场景（比如加载图片、脚本），对你要拿JSON数据的需求完全不适用。

正确的解决方案 #

1. 在子域名文件托管服务器上配置CORS（最推荐） #

这是根本解决方法，你需要让服务器在返回资源时，添加允许你主域名访问的响应头。根据你用的服务器类型，配置方式不同：

如果你用Nginx：

在服务器配置块或对应的location里添加以下内容（替换成你的主域名，或者用*允许所有域名，后者安全性较低）：

location / {
    # 处理OPTIONS预检请求（浏览器会先发这个请求检查权限）
    if ($request_method = OPTIONS) {
        add_header Access-Control-Allow-Origin https://your-main-domain.com;
        add_header Access-Control-Allow-Methods GET, OPTIONS;
        add_header Access-Control-Allow-Headers Content-Type;
        return 204; # 返回空响应，无需内容
    }
    # 给普通GET请求添加CORS头
    add_header Access-Control-Allow-Origin https://your-main-domain.com;
    # 保留你原有的服务器配置
}

如果你用Apache：

在子域名的.htaccess文件里添加：

Header set Access-Control-Allow-Origin "https://your-main-domain.com"
Header set Access-Control-Allow-Methods "GET, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type"

如果你用云存储服务（比如AWS S3、阿里云OSS）：

在存储桶的权限设置里找到CORS配置，添加允许你主域名的规则，比如S3的CORS配置示例：

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>https://your-main-domain.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

2. 如果无法修改子域名服务器，用反向代理 #

如果你没法调整子域名的服务器配置，可以在你的主域名服务器上设置反向代理，把请求转发到子域名。这样浏览器会认为请求是同域的，就不会触发CORS检查。

比如Nginx反向代理配置：

location /proxy-files/ {
    proxy_pass https://your-subdomain.example.com/; # 替换成你的子域名
    proxy_set_header Host $host;
    # 其他代理相关配置
}

然后你的前端代码就可以请求/proxy-files/your-json-file.json，而不是直接请求子域名。

3. 修正你的前端代码 #

去掉无效的请求头和no-cors模式，正确的代码应该是这样：

async function getData(url = '') {
    try {
        const response = await fetch(url, {
            method: 'get',
            headers: {
                'Content-Type': 'application/json' // 如果你的JSON需要这个头的话
            },
            // 不需要mode: 'no-cors'，也不需要Access-Control-Allow-Origin请求头
        });
        if (!response.ok) {
            throw new Error(`请求失败，状态码：${response.status}`);
        }
        return response.json();
    } catch (error) {
        console.error('获取数据出错：', error);
        throw error; // 可以根据需求处理错误
    }
}

总结 #

核心问题是你的子域名服务器没有返回允许你主域名访问的CORS响应头，所以必须在服务器端解决这个问题——客户端的请求头设置完全无效，no-cors模式也只是掩耳盗铃，没法拿到你需要的JSON数据。

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