ExpressJS XMLHttpRequest 路由错误答案

【问题标题】：ExpressJS XMLHttpRequest Routing ErrorExpressJS XMLHttpRequest 路由错误
【发布时间】：2016-06-14 20:41:56
【问题描述】：

我有一个问题，我试图以查询参数形式将我的文件信息传递给我设置的路由，以上传我的 AWS 文件，然后返回 URL。我遇到的问题是该表单位于使用/create/comment 路由访问的视图文件中，并且添加到我的所有路由之前是/app。在我的 XMLHttpRequest 中，我请求 /app/sign 和文件查询参数，但由于某种原因，它一直在前面加上 /app/create 或 /app/create/app/sign，这就是为什么我有 404 错误。有没有一种特定的方法来防止/app/create的前置？

xhr.send();处的错误函数

function sign_request(file, done) {
        var xhr = new XMLHttpRequest();
        console.log(xhr);
        console.log(file);
        xhr.open("GET", "app/sign?file_name=" + file.name + "&file_type=" + file.type);
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                console.log(response);
                done(response);
            }
        };
        xhr.send();
    };

错误信息：

comment:139 GET http://localhost:3000/app/create/app/sign?file_name=File-name.png&file_type=image/png 404 (Not Found)

这是我的路线设置：

  var express = require('express');
    var router  = express.Router();
    router.use('/app');
var config = require(path.resolve(__dirname, '..', '..','./config/config.js'));
var models = require('../models/db-index');
var fs = require('fs');
var aws = require('aws-sdk');

    /*====   /SIGN  ====*/

    router.get('/sign', function(req, res){
        aws.config.update({accessKeyId: config.awsAccessKeyId, secretAccessKey: config.awsSecretAccessKey});

        var s3 = new aws.S3()
        var options = {
          Bucket: config.awsBucket,
          Region: 'us-east-1',
          Key: req.query.file_name,
          Expires: 60,
          ContentType: req.query.file_type,
          ACL: 'public-read'
        }

        s3.getSignedUrl('putObject', options, function(err, data){
          if(err) return res.send('Error with S3')

          res.json({
            signed_request: data,
            url: 'https://s3.amazonaws.com/' + S3_BUCKET + '/' + req.query.file_name
          });
        });
    });

    router.get('/create/comment',function(req, res){
            models.DiscoverySource.findAll({
                where: {
                    organizationId: req.user.organizationId
                }, attributes: ['discoverySourceName']
            }).then(function(discoverySource){
                res.render('pages/app/comment-create.hbs',{
                    discoverySource: discoverySource
                });
            });

        });

表单（在 /app/create/comment 访问）：

<!DOCTYPE html>
<head>
    {{> app/app-head}}
</head>
<body>
    {{> app/app-navigation}}
    <div class="container">
        <div class="col-md-12">
            <div class="row-form-container">
                <label for="report-link">File Attachment:</label>
                    <input type="file" name="fileAttachment" id="image"> 
                    <img id="preview">
            </div>
    </div>
    <script type="text/javascript">


        function upload(file, signed_request, url, done) {
            var xhr = new XMLHttpRequest();
            xhr.open("PUT", signed_request);
            xhr.setRequestHeader('x-amz-acl', 'public-read');
            xhr.onload = function() {
            if (xhr.status === 200) {
                done();
            };
        };
        xhr.send(file);
        }

    function sign_request(file, done) {
        console.log('work please');
        var xhr = new XMLHttpRequest();
        console.log(xhr);
        console.log(file);
        xhr.open("GET", "app/sign?file_name=" + file.name + "&file_type=" + file.type);
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                console.log(response);
                done(response);
            }
        };
        xhr.send();
    };

    document.getElementById("image").onchange = function() {
        var file = document.getElementById("image").files[0]
        if (!file) return
            sign_request(file, function(response) {
                upload(file, response.signed_request, response.url, function() {
                    document.getElementById("preview").src = response.url
                });
            });
    };
    </script>
</body>

【问题讨论】：

标签： ajax express xmlhttprequest

【解决方案1】：

发送请求时在app/sign 之前添加/ 将阻止当前子路径的前置。试试：

xhr.open("GET", "/app/sign?file_name=" + file.name + "&file_type=" + file.type);

【讨论】：