我想获取JSON数据，以便可以在前端使用。
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)) {
// Process the data as an array and add product items to the list
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'); // Create an image element
image.src = product.product_image; // Set the image source to the product_image URL
listItem.appendChild(image); // Add the image to the list item
productList.appendChild(listItem);
});
} else {
console.error('Invalid data structure. Expected an array.');
}
})
.catch(error => {
console.error('Error fetching products:', error);
});但我的情况是
'http://127.0.0.1:3000' Response Data: <!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>
在终端
[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
虽然我已将
settings.pyALLOWED_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",
]
并配置了
INSTALLED_APPSMIDDLEWARE来自ngrok的PM在这里。 @CBroe 是正确的，您看到的是从 ngrok 返回的滥用插页式广告。要解决此问题，请将
ngrok-skip-browser-warning