WEBアプリ開発でPDFファイルアップロード時に404エラーが発生する問題について

Question

実現したいこと

HTMLで記述した画面のアップロードボタン押下後にサーバの指定のディレクトリにPDFをアップロードする処理を行いたい。
・エンドポイント : /api/upload
・アップロード先のディレクトリ : /var/uploads

※確認済みの事項
・エンドポイントのパスは正しく設定されている
・ファイルのバリデーションは正常に動作
・フォームデータは正しく構築されている

発生している問題・分からないこと

アップロードボタン押下時に404エラーが発生

エラーメッセージ

Failed to load resource: the server responded with a status of 404 (Not Found)
Response status: 404
Error response: Not Found
Response is not JSON: SyntaxError: Unexpected token 'N', "Not Found" is not valid JSON

該当のソースコード

document.addEventListener('DOMContentLoaded', function() {
    // 要素の取得
    const fileInput = document.getElementById('file-input');
    const previewContainer = document.getElementById('preview-container');
    const uploadButton = document.getElementById('upload-btn');
    const cancelButton = document.getElementById('cancel-btn');
    const radioButtons = document.querySelectorAll('input[name="file-type"]');

    let selectedFile = null;

    // ファイル選択時の処理
    fileInput.addEventListener('change', () => {
        const file = fileInput.files[0];
        if (!file) {
            clearUploadForm();
            return;
        }

        // 基本バリデーション
        if (file.size > 5 * 1024 * 1024) {
            alert('ファイルサイズが5MBを超えています');
            clearUploadForm();
            return;
        }

        if (file.type !== 'application/pdf') {
            alert('PDFファイルのみアップロード可能です');
            clearUploadForm();
            return;
        }

        // プレビュー表示
        const fileURL = URL.createObjectURL(file);
        previewContainer.innerHTML = `<object data="${fileURL}" type="application/pdf" width="100%" height="600px"></object>`;
        selectedFile = file;
    });

    // アップロード処理
    uploadButton.addEventListener('click', async (e) => {
        try {
            e.preventDefault();

            if (!selectedFile) {
                alert('ファイルが選択されていません');
                return;
            }

            let selectedType = '';
            for (const radio of radioButtons) {
                if (radio.checked) {
                    selectedType = radio.value;
                    break;
                }
            }

            if (!selectedType) {
                alert('ファイルタイプを選択してください');
                return;
            }

            const formData = new FormData();
            formData.append('file', selectedFile);
            formData.append('file_type', selectedType);

            const response = await fetch('/api/upload', {
                method: 'POST',
                body: formData
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();
            alert(data.message || 'アップロード完了');
            clearUploadForm();
        } catch (error) {
            alert(`アップロードエラー: ${error.message}`);
        }
    });

    // フォームクリア
    function clearUploadForm() {
        fileInput.value = '';
        previewContainer.innerHTML = '';
        selectedFile = null;
        radioButtons.forEach(radio => radio.checked = false);
    }

    // キャンセル処理
    cancelButton.addEventListener('click', (e) => {
        e.preventDefault();
        clearUploadForm();
    });
});

import os
import json
import cgi
import logging
import datetime 
import configparser
from sqlalchemy import create_engine, text, MetaData, Table
from sqlalchemy.exc import SQLAlchemyError

# 基本設定
logging.basicConfig(filename='/tmp/app.log', level=logging.DEBUG)

def load_config():
    try:
        config = configparser.ConfigParser()
        config.read('config.env', encoding="utf-8_sig")
        return config
    except Exception as e:
        logging.error(f"Config error: {str(e)}")
        raise

# アップロード設定
UPLOAD_FOLDER = '/var/uploads'
ALLOWED_EXTENSIONS = {'pdf'}

def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

def validate_file_type(file_type):
    return file_type in ['type1', 'type2', 'type3']

def save_file(file_item, file_type):
    try:
        if not file_item.filename:
            raise ValueError('ファイルが選択されていません')

        filename = os.path.basename(file_item.filename)
        
        # 基本バリデーション
        if not all([
            validate_file_type(file_type),
            allowed_file(filename),
            len(file_item.file.read()) <= 5 * 1024 * 1024
        ]):
            raise ValueError('ファイルが要件を満たしていません')

        # ファイル保存
        file_path = os.path.join(UPLOAD_FOLDER, filename)
        with open(file_path, 'wb') as f:
            f.write(file_item.file.read())
            
        return filename
    except Exception as e:
        logging.error(f"Save error: {str(e)}")
        raise

def application(environ, start_response):
    try:
        headers = [
            ('Content-Type', 'application/json'),
            ('Access-Control-Allow-Origin', '*'),
            ('Access-Control-Allow-Methods', 'POST, OPTIONS'),
            ('Access-Control-Allow-Headers', 'Content-Type')
        ]

        # パスチェック
        if environ.get('PATH_INFO', '').rstrip('/') != '/api/upload':
            start_response('404 Not Found', headers)
            return [json.dumps({'error': 'Not Found'}).encode('utf-8')]

        # OPTIONSリクエスト処理
        if environ['REQUEST_METHOD'] == 'OPTIONS':
            start_response('200 OK', headers)
            return [b'']

        # POSTリクエスト処理
        elif environ['REQUEST_METHOD'] == 'POST':
            try:
                form = cgi.FieldStorage(
                    fp=environ['wsgi.input'],
                    environ=environ,
                    keep_blank_values=True
                )

                if 'file' not in form:
                    raise ValueError('ファイルがありません')

                saved_filename = save_file(
                    form['file'], 
                    form.getvalue('file_type')
                )

                start_response('200 OK', headers)
                return [json.dumps({
                    'status': 'success',
                    'message': f'アップロード成功: {saved_filename}'
                }).encode('utf-8')]

            except ValueError as e:
                start_response('400 Bad Request', headers)
                return [json.dumps({'error': str(e)}).encode('utf-8')]
        
        # その他のメソッド
        else:
            start_response('405 Method Not Allowed', headers)
            return [json.dumps({'error': 'Method Not Allowed'}).encode('utf-8')]

    except Exception as e:
        start_response('500 Internal Server Error', headers)
        return [json.dumps({'error': 'Internal Server Error'}).encode('utf-8')]

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

ログを細かく出力し、原因を探りましたが解決しませんでした。

補足

リクエストからレスポンスの流れは次のようになってます。
① html ⇒ ② nginx ⇒ ③ unit ⇒ ④ python ⇒ ③ unit ⇒ ② nginx ⇒ ① html

Comments

[int32_t]

Pythonコード実行時に environ.get('PATH_INFO', '').rstrip('/') が何になっているかを確認すべきかと思います。

[Lhankor_Mhy]

『エンドポイントのパスは正しく設定されている』ということは、ご提示のコードでは404が返ってくるが、curlなどのその他の手段でリクエストした場合は404にならない、ということでいいでしょうか？

[juner]

> Response is not JSON: SyntaxError: Unexpected token 'N', "Not Found" is not valid JSON
ということは "Not Found" という固定文字列を返しているが json でないのでエラーとなっていると読めるのですが、 戻りの content-type を固定 で json にしていたりするのでしょうか？

Answer 1

404エラーなのですから単純にアップロードの指定先が間違っているだけでは？

たとえばこんなソースで

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  btn.addEventListener('click',()=>{
    const file=myfile.files[0];
    if(file){
      const fr = new FileReader();
      fr.onload = e=>{
        const body=new FormData();
        body.append("userfile", new Blob([e.target.result],{"type":file.type}),file.name );
        const url='/api/upload';
        fetch(url,{
          method:"post",
          body,
        }).then(res=>{
          if(res.ok) return res.text();
          throw new Error(res.status);
        }).then(txt=>{
          console.log(txt);
        }).catch(err=>{
          console.error(err);
        }); 
      }
      fr.readAsArrayBuffer(file);
    }
  });
});
</script>
<input type="file" id="myfile" name="myfile" accept=".pdf">
<input type="button" id="btn" value="send">

受け取り側が「/api/upload」というディレクトリ（？）になっていますが、受取用のプログラム(API?)を指定する必要があるように見えますが、なにをもって「アップロード先は合っていました」と判断されたのでしょうか？

ファイルの転送ができているのにAPI側が何らかの理由（送られてきたファイルが想定とちがうとかなんらかの必要なトークンがぬけてるとか）でわざと404エラーを吐いている可能性はあるので、その場合はAPI側の仕様を確認してもらう必要があります

Comments

[mok__]

確認しましたが、アップロード先は合っていました。

[yambejp]

一応fetchをfilereader形式にしてみましたのでテストしてみてください