Question

我正在与React和Express.js合作，为Google Vision API创建文件上传服务。我在提交时创建了一个简单的文件上传到帖子'/ upload'。上传后，我一直在遇到这个错误：

Proxy error: Could not proxy request /upload from localhost:3000 to http://localhost:3000/ (ECONNRESET).

这是我的反应app.js构成了简单的图片上传表单。

App.js

import React, { Component } from 'react';
import {
  Button,
  Col,
  Form,
  FormGroup,
  Label,
  Input,
  FormText
} from 'reactstrap';
import './App.css';

class App extends Component {

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src='https://media1.tenor.com/images/aa12acad78c918bb62fa41cf7af8cf75/tenor.gif?itemid=5087595' className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to Readr</h1>
        </header>
        <Form action='/upload' method="POST">
          <FormGroup row>
            <Label for="exampleFile" sm={2}>File</Label>
            <Col sm={10}>
              <Input type='file' name='image' />
              <FormText color="muted">
              </FormText>
            </Col>
          </FormGroup>
          <FormGroup row>
            <Label for="exampleSelect" sm={2}>What are we trying to see today in the image?</Label>
            <Col sm={10}>
              <Input type="select" name="select" id="exampleSelect">
                <option>Labels</option>
                <option>Faces</option>
                <option>Landmarks</option>
                <option>Text</option>
                <option>Logos</option>
              </Input>
            </Col>
          </FormGroup>
          <FormGroup check row>
            <Col sm={{ size: 10, offset: 2 }}>
              <Button type="submit">Submit</Button>
            </Col>
          </FormGroup>
        </Form>
      </div>
    );
  }
}

export default App;

Server.js

'use strict';
// Middleware
const express = require('express');
const fs = require('fs');
const util = require('util');
const mime = require('mime-types');
const multer = require('multer');
const upload = multer({ dest: 'uploads/',
 rename: function (fieldname, filename) {
   return filename;
 },
});
const Image = require('./data/db.js');
const path = require('path');

// Imports the Google Cloud client library
const vision = require('@google-cloud/vision');
// Creates a client
const client = new vision.ImageAnnotatorClient();

let app = express();

// Simple upload form

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname + '/client/index.html'));
});

// Get the uploaded image
// Image is uploaded to req.file.path
app.post('/upload', upload.single('image'), function(req, res, next) {

  // Choose what the Vision API should detect
  // Choices are: faces, landmarks, labels, logos, properties, safeSearch, texts
  var types = ['labels'];

  // Send the image to the Cloud Vision API
  client
  .labelDetection(req.file.path)
  .then(results => {
    // Pull all labels from POST request
    const labels = [];
    results[0].labelAnnotations.forEach(function(element) {
      labels.push(element.description);
    })
    res.writeHead(200, {
      'Content-Type': 'text/html'
    });

    // Create new Image Record
    let image = new Image ({});
    image.data = fs.readFileSync(req.file.path);
    image.contentType = 'image/png';
    image.labels = labels;
    image.save((err) => {
      if (err) {
        console.log('Error:' , err);
      }
    })

    res.write('<!DOCTYPE HTML><html><body>');

    // Base64 the image so we can display it on the page
    res.write('<img width=600 src="' + base64Image(req.file.path) + '"><br>');

    // Write out the JSON output of the Vision API
    res.write(JSON.stringify(labels, null, 4));
    // Delete file (optional)
    fs.unlinkSync(req.file.path);

    res.end('</body></html>');
  })

  // ERROR from Cloud Vision API
  .catch(err => {
    console.log(err);
    res.end('Cloud Vision Error:' , err);
  });
});

app.listen(8080);
console.log('Server listening on 8080');

// Turn into Base64, an easy encoding for small images
function base64Image(src) {
  var data = fs.readFileSync(src).toString('base64');
  return util.format('data:%s;base64,%s', mime.lookup(src), data);
}

的package.json

   {
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.0.0",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
    "react-scripts": "1.1.1",
    "reactstrap": "^5.0.0-beta.3",
    "@google-cloud/vision": "^0.18.0",
    "babel": "^6.23.0",
    "express": "^4.13.4",
    "mime": "^1.3.4",
    "mime-lookup": "0.0.2",
    "mime-types": "^2.1.18",
    "mongodb": "^3.0.5",
    "mongoose": "^5.0.12",
    "multer": "^1.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "server": "GOOGLE_APPLICATION_CREDENTIALS='key.json' nodemon ./public/sample.js --ignore client",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3000/"
}

我不熟悉使用react和express.js应用程序的代理。有人可以帮助澄清导致此代理错误的确切原因吗？

Answer 1

据我所知，您必须定位运行快速服务器的端口。在这种情况下，端口是8080。此外，我假设您使用create-react-app来构建客户端，因为代理在包内提供。

"proxy": {
"/upload": {
  "target": "http://localhost:8080"
},

也许你已经知道但是如果你想代理嵌套在/ upload路由中的其他请求，你可以使用/ upload / *代理嵌套路由，而不在代理配置中创建单独的路由。

您可以随时查看文档，详细了解如何设置代理配置： facebook/create-react-app

在代理部分内部，他们有详细的说明。

希望有所帮助。

无法代理请求/上传

1 个答案: