Python中Failed to load resource: connection refused错误求助

问题描述 #

运行localhost:8001的前端服务时，尝试连接127.0.0.1:60000端口出现错误：Failed to load resource: net::ERR_CONNECTION_REFUSED。但前端代码中实际请求的是http://127.0.0.1:8000/store/products/1/images/，需先对齐服务端端口配置并排查服务状态。

排查与解决方案 #

1. 确认Django服务运行状态与端口 #

• 若服务端计划监听60000端口，启动Django时必须指定端口：

  python manage.py runserver 127.0.0.1:60000
  

• 检查终端输出，确保服务无报错、正常启动。

2. 修正前端请求地址 #

如果Django确实运行在60000端口，修改index.js中的API地址：

const apiUrl = 'http://127.0.0.1:60000/store/products/1/images/';

3. 优化请求配置 #

手动设置Content-Type: multipart/form-data会导致axios无法自动生成请求边界符，建议移除该配置，让axios自动处理文件上传：

return axios.post(apiUrl, formData, {
  onUploadProgress: (progressEvent) => {
    const { loaded, total } = progressEvent;
    const percentCompleted = Math.round((loaded / total) * 100);
    setProgress(percentCompleted);
  },
});

4. 验证后端端点有效性 #

• 确认store应用的urls.py中存在对应路由，指向处理图片上传的视图函数。
• 检查ProductImageSerializer是否正确定义image字段，支持文件上传。
• 确保ID为1的产品存在，避免因404错误导致前端误判为连接问题。

相关代码整理 #

Django配置 #

INSTALLED_APPS = [
    'jazzmin',
    'django.contrib.admin',
    'django.contrib.sessions',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_filters',
    "corsheaders",
    'rest_framework',
    'djoser',
    'playground',
    'debug_toolbar',
    'store',
    'tags',
    'likes',
    'core',
]

MIDDLEWARE = [
    "corsheaders.middleware.CorsMiddleware",
    'debug_toolbar.middleware.DebugToolbarMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

INTERNAL_IPS = [
    # ...
    '127.0.0.1',
    # ...
]
CORS_ALLOWED_ORIGINS = [
    "http://localhost:8001",
    "http://127.0.0.1:8001",
]

index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Storefront Client</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div id="alertContainer"></div>
      <div class="progress d-none">
        <div
          id="progressBar"
          class="progress-bar"
          role="progressbar"
          aria-valuenow="0"
          aria-valuemin="0"
          aria-valuemax="100"
        ></div>
      </div>
      <form>
        <div class="mb-3">
          <label for="image" class="form-label"></label>
          <input
            id="image"
            class="form-control"
            type="file"
            accept="image/png, image/jpeg"
          />
        </div>
        <button id="upload" class="btn btn-primary" type="submit" disabled>
          Upload
        </button>
      </form>
    </div>
    <script type="module" src="index.js"></script>
  </body>
</html>

index.js（优化后） #

import 'regenerator-runtime/runtime';
import axios from 'axios';

const progressBar = document.querySelector('#progressBar');

const alert = (message, type) => {
  const alertContainer = document.querySelector('#alertContainer');
  alertContainer.innerHTML = `
    <div class="alert alert-${type}">
      ${message}
    </div>
    `;
};

const setProgress = (percentCompleted) => {
  progressBar.style.width = percentCompleted + '%';
  progressBar.setAttribute('aria-valuenow', percentCompleted);
};

const uploadFile = (file) => {
  const apiUrl = 'http://127.0.0.1:60000/store/products/1/images/';

  const formData = new FormData();
  formData.append('image', file);

  return axios.post(apiUrl, formData, {
    onUploadProgress: (progressEvent) => {
      const { loaded, total } = progressEvent;
      const percentCompleted = Math.round((loaded / total) * 100);
      setProgress(percentCompleted);
    },
  });
};

const handleImageSelect = (event) => {
  const button = document.querySelector('#upload');
  button.disabled = event.target.files.length == 0;
};

const handleSubmit = async (event) => {
  event.preventDefault();

  setProgress(0);
  progressBar.parentElement.classList.remove('d-none');

  try {
    const image = document.querySelector('#image');
    const response = await uploadFile(image.files[0]);
    alert('Image successfully uploaded!', 'success');
  } catch (err) {
    if (err.response) alert(err.response.data.image[0], 'danger');
    else if (err.request) alert('Could not reach the server!', 'danger');
    else alert('An unexpected error occurred!', 'danger');
  }

  progressBar.parentElement.classList.add('d-none');
};

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

const image = document.querySelector('#image');
image.addEventListener('change', handleImageSelect);

package.json #

{
  "name": "storefront3_client",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel index.html -p 8001",
    "test": "echo \"No test specified\"",
    "server": "parcel index.html"
  },
  "type": "module",
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^1.2.0",
    "socket.io": "^4.5.4"
  },
  "devDependencies": {
    "buffer": "^5.7.1",
    "parcel": "^2.8.0"
  }
}

styles.css #

body { 
  padding-top: 50px;
}

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