JavaScript fetch请求仅返回CORS重定向响应无法正常取数

问题根因 #

从你贴的返回结果可以直接定位问题：

• 你写的请求地址是http://192.168.2.131:81/stern，服务端（Apache/Nginx）默认对不带尾部斜杠的目录路径做自动跳转，最终跳到了http://192.168.2.131:81/stern/，对应Response里redirected: true、url字段带尾部斜杠的特征。
• 跨域场景下这个自动重定向没有正确携带CORS响应头，你看到Response的headers为空、无法正常解析JSON，就是因为浏览器拦截了跨域重定向后的响应体读取权限，虽然状态码显示200，但实际拿不到返回内容。

修复方法 #

前端直接修复（最快生效，推荐优先用） #

直接把请求地址改成最终跳转后的完整地址，补上末尾的斜杠，跳过不必要的重定向流程，修改后的完整代码：

async function getTop10() {
    // 末尾补/，和实际返回数据的接口地址完全一致
    let url = 'http://192.168.2.131:81/stern/';
    try {
        let res = await fetch(url);
        if (!res.ok) throw new Error(`请求异常，状态码：${res.status}`);
        console.log(res);
        return await res.json();
    } catch (error) {
        console.log(error);
    }
}
getTop10();

改完之后再请求，Response里的redirected字段会变成false，可以正常解析出你贴的Top10二维数组数据。

服务端配置修复（不想改前端URL时用） #

如果必须保留原请求地址不带斜杠，修改Web服务配置，避免外跳重定向，同时给接口加上正确的CORS头：

• Nginx配置参考：

# 匹配不带斜杠的/stern路径，内部重写不触发外部跳转
location = /stern {
    add_header Access-Control-Allow-Origin *;
    rewrite ^ /stern/ last;
}
# 匹配带斜杠的实际接口路径
location /stern/ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods "GET, OPTIONS";
    # 替换成你实际的PHP解析规则
    try_files $uri $uri/ /stern/index.php?$query_string;
}

• Apache配置参考（在站点根目录.htaccess中添加）：

# 配置CORS头
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, OPTIONS"
# 关闭目录自动斜杠外部跳转
DirectorySlash Off
RewriteRule ^stern$ stern/ [L]

验证标准 #

修改后调用接口，控制台打印的Response对象redirected值为false，res.json()能正常解析出词频统计数组即为修复成功。

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