Express 无法代理请求/上载_Express_Reactstrap

Express 无法代理请求/上载

express

Express 无法代理请求/上载,express,reactstrap,Express,Reactstrap,我正在使用React和Express.js创建一个到Google Vision API的文件上传服务。我已经创建了一个简单的上传文件，在提交后将其发布到“/upload”。上传时，我不断遇到以下错误： Proxy error: Could not proxy request /upload from localhost:3000 to http://localhost:3000/ (ECONNRESET). 下面是我的react app.js，它构成了简单的图像上传表单 App.js impo

我正在使用React和Express.js创建一个到Google Vision API的文件上传服务。我已经创建了一个简单的上传文件，在提交后将其发布到“/upload”。上传时，我不断遇到以下错误：

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

下面是我的react 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;

'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);
}

我对react和express.js应用程序使用代理还不熟悉。有人能帮助澄清到底是什么导致了这个代理错误吗

据我所知，您必须以运行express服务器的端口为目标。在这种情况下，端口是8080。我还假设您使用createreact应用程序来构建客户端，因为代理是在包中提供的

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

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

您可以随时查看文档，了解有关如何在此处设置代理配置的更多信息：

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

希望有帮助

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