title: React / Express Access to fetch from Origin Blocked by CORS Policy
body: <p>I am trying to learn React and Express. I am trying to allow local file upload from a react component and need Express to catch the file, but no matter what I try, I get:</p>
  
  <pre><code>Access to fetch at 'http://localhost:3001/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  </code></pre>
  
  <p>I have installed npm install CORS --save on the Express server. I set a proxy in the React package.json. See below:</p>
  
  <pre><code>},
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "proxy": "http://localhost:3001",
    "browserslist": {
  </code></pre>
  
  <p>React is running on port 3000 and Express on 3001.</p>
  
  <p>Here is the component executing the fetch:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class AddNewItem extends Component {
    constructor(props) {
      super(props);
      this.state = {
        selectedFile: null,
        imagePath: ''
      }
    }
  
    handleSubmit = (event) =&gt; {
      event.preventDefault()
      console.log(event.target[0].value)
      console.log(event.target.title.value)
      console.log(event.target.image.value)
      console.log(this.inputNode.value)
  
      const data = new FormData()
      data.append("image", this.state.selectedFile)
  
      //const myFileInputs = document.querySelector("input[type='image']");
  
      fetch('http://localhost:3001', {
        method: 'POST',
        body: data
      })
        .then(response =&gt; response.json())
        .then(data =&gt; {
          console.log(data)
          this.setState({ fileName: data.originalname })
        })
    }
  
    fileSelectedHandler = event =&gt; {
      console.log(event.target.files[0]);
  
      this.setState({
        selectedFile: event.target.files[0],
        loaded: 0,
      })
    }
    render() {
      return (
        &lt;div&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;label&gt;Title:&lt;/label&gt;&lt;br /&gt;
            &lt;input type="text" id="title" name="title" ref={node =&gt; (this.inputNode = node)} /&gt;&lt;br /&gt;
            &lt;label&gt;Image:&lt;/label&gt;&lt;br /&gt;
            &lt;input type="file" id="image" name="image" onChange={this.fileSelectedHandler}&gt;&lt;/input&gt;
            &lt;button type="submit"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default AddNewItem;
  </code></pre>
  
  <p>And here is my Express server:</p>
  
  <pre><code>var express = require('express')
  var cors = require('cors')
  var app = express()
  
  var whitelist = ['http://localhost:3000']
  var corsOptions = {
    origin: function (origin, callback) {
      if (whitelist.indexOf(origin) !== -1) {
        callback(null, true)
      } else {
        callback(new Error('Not allowed by CORS'))
      }
    }
  }
  
  app.get('/', cors(corsOptions), function (req, res, next) {
    res.json({ msg: 'This is CORS-enabled for a whitelisted domain.' })
  })
  
  app.listen(3001, function () {
    console.log('CORS-enabled web server listening on port 3001')
  })
  </code></pre>
  
  <p>When I start the Express server, I get </p>
  
  <pre><code>CORS-enabled web server listening on port 3001
  </code></pre>
  
  <p>in my terminal.</p>
  
  <p>My web page console gives me the following output when I submit the file to the Express server from the React component. See the screen shot:
  <a href="https://i.stack.imgur.com/pgbk6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pgbk6.png" alt="enter image description here"></a></p>
  
  <p>What am I doing wrong? I have been working on this for several hours. Thanks.</p>
  
  <p>After removing the proxy from the React package.json, I get the following in the console:
  <a href="https://i.stack.imgur.com/P3ESr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P3ESr.png" alt="enter image description here"></a></p>