使用NGROK静态域名无法获取JSON响应的技术求助

核心解决方案 #

1. 完成Ngrok浏览器安全验证 #

ERR_NGROK_6024是免费版Ngrok的强制安全验证机制：

• 直接在浏览器地址栏打开https://absolutely-relaxed-koala.ngrok-free.app/api/admin-products/
• 按照页面提示登录Ngrok免费账号并完成验证（点击确认访问的按钮）
• 验证通过后，前端的fetch请求就能正常获取JSON数据

2. 修复Django CORS配置冲突 #

你同时开启了CORS_ALLOW_ALL_ORIGINS = True和CORS_ALLOWED_ORIGINS，这两个配置互斥，会导致CORS规则混乱：

• 二选一配置：要么保留CORS_ALLOW_ALL_ORIGINS = True并注释掉CORS_ALLOWED_ORIGINS，要么关闭全量允许，改用精确来源列表
• 推荐的修正后配置：

ALLOWED_HOSTS = ['absolutely-relaxed-koala.ngrok-free.app','127.0.0.1']
CORS_ALLOW_ALL_ORIGINS = False
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_METHODS = [
    'GET',
    'POST',
    'PUT',
    'PATCH',
    'DELETE',
    'OPTIONS',
]
CORS_ALLOW_HEADERS = [
    'Authorization',
    'Content-Type',
]

CORS_ALLOWED_ORIGINS = [
    "https://absolutely-relaxed-koala.ngrok-free.app",
    "http://localhost:63342",
    "http://127.0.0.1:3000",  # 补充你的本地前端地址
]

3. 确认Ngrok转发正确性 #

• 检查Ngrok启动命令是否对应Django服务端口，比如Django跑在8000端口，命令应为ngrok http 8000
• 打开本地Ngrok控制台http://localhost:4040，查看请求是否正确转发到Django：
  • 若请求未出现在控制台，重新复制Ngrok生成的域名
  • 若控制台有记录但Django终端没收到，检查本地防火墙或端口占用

4. 消除重复OPTIONS请求 #

多次OPTIONS请求是浏览器CORS预检机制的正常表现，但重复触发可能是配置问题：

• 确保前端fetch显式声明mode: 'cors'（默认值，但显式声明可避免潜在问题）：

fetch('https://absolutely-relaxed-koala.ngrok-free.app/api/admin-products/', {
    method: 'GET',
    mode: 'cors',
    headers: {
        Authorization: `Token ${authToken}`,
    },
})

• 重启Django服务，确认corsheaders.middleware.CorsMiddleware在MIDDLEWARE列表中，且位于django.middleware.common.CommonMiddleware之前

问题详情 #

前端请求代码 #

const authToken = 'e6f13bd9e9b74d540b8fc998b44e25bf2857cb5d';

fetch('https://absolutely-relaxed-koala.ngrok-free.app/api/admin-products/', {
    method: 'GET',
    headers: {
        Authorization: `Token ${authToken}`,
    },
})
.then(response => {
    if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
})
.then(data => {
    console.log('API Response:', data);

    if (Array.isArray(data)) {
        const productList = document.getElementById('product-list');

        data.forEach(product => {
            const listItem = document.createElement('tr');
            listItem.textContent = `${product.name} - Price: $${product.product_image}`;

            const image = document.createElement('img');
            image.src = product.product_image;
            listItem.appendChild(image);
            productList.appendChild(listItem);
        });
    } else {
        console.error('Invalid data structure. Expected an array.');
    }
})
.catch(error => {
    console.error('Error fetching products:', error);
});

Ngrok返回的错误页面 #

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="ngrok">
    <meta name="description" content="ngrok is the fastest way to put anything on the internet with a single command.">
    <meta name="robots" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link id="style" rel="stylesheet" href="https://cdn.ngrok.com/static/css/error.css">
    <noscript>You are about to visit absolutely-relaxed-koala.ngrok-free.app, served by 2402:e280:2238:1ec:84ed:7bb7:3e94:895e. This website is served for free through ngrok.com. You should only visit this website if you trust whoever sent the link to you. (ERR_NGROK_6024)</noscript>
    <script id="script" src="https://cdn.ngrok.com/static/js/error.js" type="text/javascript"></script>
  </head>
  <body id="ngrok">
    <div id="root" data-payload="eyJjZG5CYXNlIjoiaHR0cHM6Ly9jZG4ubmdyb2suY29tLyIsImNvZGUiOiI2MDI0IiwiaG9zdHBvcnQiOiJhYnNvbHV0ZWx5LXJlbGF4ZWQta29hbGEubmdyb2stZnJlZS5hcHAiLCJtZXNzYWdlIjoiWW91IGFyZSBhYm91dCB0byB2aXNpdCBhYnNvbHV0ZWx5LXJlbGF4ZWQta29hbGEubmdyb2stZnJlZS5hcHAsIHNlcnZlZCBieSAyNDAyOmUyODA6MjIzODoxZWM6ODRlZDo3YmI3OjNlOTQ6ODk1ZS4gVGhpcyB3ZWJzaXRlIGlzIHNlcnZlZCBmb3IgZnJlZSB0aHJvdWdoIG5ncm9rLmNvbS4gWW91IHNob3VsZCBvbmx5IHZpc2l0IHRoaXMgd2Vic2l0ZSBpZiB5b3UgdHJ1c3Qgd2hvZXZlciBzZW50IHRoZSBsaW5rIHRvIHlvdS4iLCJzZXJ2aW5nSVAiOiIyNDAyOmUyODA6MjIzODoxZWM6ODRlZDo3YmI3OjNlOTQ6ODk1ZSIsInRpdGxlIjoiT0sifQ=="></div>
  </body>
</html>

Django终端日志 #

[19/Sep/2023 12:49:35] "OPTIONS /api/admin-products/ HTTP/1.1" 200 0
[19/Sep/2023 12:49:35] "OPTIONS /api/admin-products/ HTTP/1.1" 200 0
[19/Sep/2023 12:49:35] "OPTIONS /api/admin-products/ HTTP/1.1" 200 0

当前Django配置（settings.py） #

ALLOWED_HOSTS = ['absolutely-relaxed-koala.ngrok-free.app','127.0.0.1']
CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_METHODS = [
    'GET',
    'POST',
    'PUT',
    'PATCH',
    'DELETE',
    'OPTIONS',
]
CORS_ALLOW_HEADERS = [
    'Authorization',  # Include any other headers your client needs to send
    'Content-Type',
]

CORS_ALLOWED_ORIGINS = [
    "https://absolutely-relaxed-koala.ngrok-free.app",
    "http://localhost:63342",
]

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