Skip to content

Instantly share code, notes, and snippets.

@sunmeat
Last active May 5, 2025 08:05
Show Gist options
  • Save sunmeat/a9342ae2b1c66c0d53440253b1b3a207 to your computer and use it in GitHub Desktop.
Save sunmeat/a9342ae2b1c66c0d53440253b1b3a207 to your computer and use it in GitHub Desktop.
pythonanywhere server example + fetch API + решение проблемы CORS
https://www.pythonanywhere.com/user/sunmeat/files/home/sunmeat/alex.py?edit:
from flask import Flask, jsonify
from flask_cors import CORS
app = Flask(__name__)
# Enable CORS for all routes, allowing all origins
CORS(app, resources={r"/api/*": {"origins": "*"}})
@app.route('/api/info', methods=['GET'])
def get_info():
data = {
"name": "Александр",
"surname": "Загоруйко",
"birth_date": "10 марта 1989 года",
"location": "Одесса, Украина",
"interests": [
"Программирование",
"Рисование акрилом",
"Французский язык",
"Выращивание авокадо",
"Путешествия",
"Гитара",
],
"current_project": "Андроид приложение - Обучение игре на сопилке",
"dream": "Переезд во Францию и путешествия",
"facts": [
"Преподаватель программирования",
"Считает, что преподавание — это призвание, а не просто работа",
"Пользуется Duolingo для изучения французского",
"Любит котов и собак",
"Выращивает авокадо, суккуленты и тангоры муркотт",
"Считает себя похожим на суккулент, так как выживает в сложных условиях",
"Живёт в Одессе",
"Считает, что самые важные вещи в жизни — это свобода и самореализация",
"Не любит навязывание чужих мнений и всегда остаётся при своём",
"Часто размышляет о судьбе и предназначении",
"Любит архитектуру готических соборов и старых европейских городов",
"Любимый сериал - Отчаянные домохозяйки",
"Вдохновляется людьми, которые идут своим путём, несмотря ни на что",
"Слушает EDM Trance и Ethnic",
"Считает себя интровертом, но может быть разговорчивым в комфортной обстановке",
"Планирует открыть храм Фреи и интересуется мифологией",
"Есть 5 приложений на плеймаркете",
"Пишет андроид-приложение для изучения игры на сопилке",
"Играет на фортепиано, мелодике, аккордеоне/выборном баяне, сопилке/блок-флейте, варгане/дрымбе, укулеле, калимбе, отаматоне, треугольнике и бубне",
"Учится играть на гитаре",
"Любит петь в караоке",
"Записался на курсы по Figma",
"Пытается переносить старый проект с ActionScript на HTML/JavaScript",
"Делал Telegram-боты на Python",
],
}
return jsonify(data)
if __name__ == '__main__':
app.run(debug=True)
===================================================================================================
https://cp1.awardspace.net/file-manager/www/sunmeat.atwebpages.com#.htaccess;action=edit:
Header set Access-Control-Allow-Origin "*"
===================================================================================================
http://sunmeat.atwebpages.com/js/python.html:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>Информация про Александра</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #121212;
color: #ffffff;
padding: 2rem;
margin: 0;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
}
button {
padding: 0.5rem 1rem;
margin: 10px;
border-radius: 5px;
border: none;
background-color: #1db954;
color: #ffffff;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #1ed760;
}
.info-box {
margin: 20px 0;
padding: 10px;
border: 1px solid #444;
border-radius: 5px;
}
.info-label {
color: #00FFFF;
font-weight: bold;
}
.info-value {
color: #FFFFFF;
}
.error {
color: #FF5555;
margin: 10px 0;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 5px 0;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="container">
<h2>Информация про Александра</h2>
<button onclick="fetchInfo()">Получить информацию</button>
<div id="result"></div>
</div>
<script>
const url = 'https://sunmeat.pythonanywhere.com/api/info';
const resultDiv = document.querySelector('#result');
async function fetchInfo() {
resultDiv.innerHTML = '<p>Загрузка...</p>';
try {
const response = await fetch(url, {
method: 'GET',
headers: {
'Accept': 'application/json'
}
});
if (!response.ok) {
throw new Error(`HTTP error: ${response.status}`);
}
const info = await response.json();
renderInfo(info);
} catch (error) {
resultDiv.innerHTML = `<p class="error">Ошибка запроса: ${error.message}</p>`;
}
}
function renderInfo(info) {
resultDiv.innerHTML = `
<div class="info-box">
<div><span class="info-label">Имя: </span><span class="info-value">${info.name || 'Не указано'} ${info.surname || ''}</span></div>
<div><span class="info-label">Дата рождения: </span><span class="info-value">${info.birth_date || 'Не указана'}</span></div>
<div><span class="info-label">Местоположение: </span><span class="info-value">${info.location || 'Не указано'}</span></div>
<div><span class="info-label">Интересы: </span><span class="info-value">${info.interests?.join(', ') || 'Не указаны'}</span></div>
<div><span class="info-label">Текущий проект: </span><span class="info-value">${info.currentProject || 'Не указан'}</span></div>
<div><span class="info-label">Мечта: </span><span class="info-value">${info.dream || 'Не указана'}</span></div>
<div><span class="info-label">Факты:</span></div>
<ul>
${info.facts?.map(fact => `<li>- ${fact}</li>`).join('') || '<li>Факты отсутствуют</li>'}
</ul>
</div>
`;
}
</script>
</body>
</html>
===================================================================================================================
про Cross-Origin Resource Sharing (CORS): https://developer.mozilla.org/ru/docs/Web/HTTP/Guides/CORS
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment