title: TypeError: "NetworkError when attempting to fetch resource."
body: <p>I've found a lot of question similar to my problem but I don't get solution that's why I've asked here.</p>
  
  <p>I've just started learning front end development using React. I've made separate app for front end and backend running at different ports.</p>
  
  <p>Backend : Laravel framework app running at <code>incomeexpense.stacklearning.com/</code></p>
  
  <p>Frontend : React app running at <code>localhost:3000/</code></p>
  
  <p>I've a form like this:</p>
  
  <pre><code>import React,{Component} from 'react';
  
  export default class Register extends Component{
  constructor(props){
      super(props);
  
      this.state = {
          name: '',
          email: '',
          password: '',
          confirm_password: ''
      }
  }
  
  updateInput = (event) =&gt;{
      const name = event.target.name;
      const value = event.target.value;
  
      this.setState({[name]: value});
  }
  
  handleSubmit = (event)=&gt;{
      event.preventDefault();
      fetch('http://incomeexpense.stacklearning.com/api/users', {
          method: 'POST',
          body: JSON.stringify({
              name: this.state.name,
              email: this.state.email,
              password: this.state.password,
              confirm_password: this.state.confirm_password
          }),
          headers: {
              "Content-Type": "application/json",
              "Origin": "localhost:3000",
          }
      }).then(function (response) {
          console.log(response);
      },function (error) {
          console.log(error);
      });
  }
  
  render(){
      return(
          &lt;div className="limiter"&gt;
              &lt;div className="container-login100"&gt;
                  &lt;div className="wrap-login100 p-l-85 p-r-85 p-t-55 p-b-55"&gt;
                      &lt;form className="login100-form validate-form flex-sb flex-w" onSubmit={this.handleSubmit}&gt;
                          &lt;span className="login100-form-title p-b-32"&gt;
                              Sign Up
                          &lt;/span&gt;
                          &lt;span className="txt1 p-b-11"&gt;
                              Name
                          &lt;/span&gt;
                          &lt;div className="wrap-input100 validate-input m-b-36" &gt;
                              &lt;input className="input100" type="text" name="name" value={this.state.name} onChange={this.updateInput}/&gt;
                              &lt;span className="focus-input100"&gt;&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;span className="txt1 p-b-11"&gt;
                              Email
                          &lt;/span&gt;
                          &lt;div className="wrap-input100 validate-input m-b-36"&gt;
                              &lt;input className="input100" type="text" name="email" value={this.state.email} onChange={this.updateInput}/&gt;
                              &lt;span className="focus-input100"&gt;&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;span className="txt1 p-b-11"&gt;
                              Password
                          &lt;/span&gt;
                          &lt;div className="wrap-input100 validate-input m-b-36"&gt;
                              &lt;input className="input100" type="password" name="password" value={this.state.password} onChange={this.updateInput}/&gt;
                              &lt;span className="focus-input100"&gt;&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;span className="txt1 p-b-11"&gt;
                              Confirm Password
                          &lt;/span&gt;
                          &lt;div className="wrap-input100 validate-input m-b-18"&gt;
                              &lt;input className="input100" type="password" name="confirm_password" value={this.state.confirm_password} onChange={this.updateInput}/&gt;
                              &lt;span className="focus-input100"&gt;&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div className="container-login100-form-btn"&gt;
                              &lt;button className="login100-form-btn"&gt;
                                  Register
                              &lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div className="flex-sb-m w-full p-b-48 m-t-60 text-center"&gt;
                              &lt;label&gt;
                                  Already have an account ?
                                  &lt;a className="txt3 m-l-5" href="/login"&gt;
                                      Sign In Now
                                  &lt;/a&gt;
                              &lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  }
  </code></pre>
  
  <p>I've following routes,</p>
  
  <pre><code>Route::middleware('auth:api')-&gt;get('/user', function (Request $request) {
      return $request-&gt;user();
  });
  
  Route::post('users',array( 'middleware'=&gt;'cors','uses'=&gt;'Auth\RegisterController@registerUser'));
  Route::get('users',array( 'middleware'=&gt;'cors','uses'=&gt;'Auth\RegisterController@getUsers'));
  </code></pre>
  
  <p>Here is CORS middleware,</p>
  
  <pre><code>&lt;?php
  
  namespace App\Http\Middleware;
  
  use Closure;
  
  class CORS
  {
      /**
       * Handle an incoming request.
       *
       * @param  \Illuminate\Http\Request  $request
       * @param  \Closure  $next
       * @return mixed
       */
      public function handle($request, Closure $next)
      {
          header('Access-Control-Allow-Origin: http://localhost:3000/');
          header('Access-Control-Allow-Credentials: true');
  
          // ALLOW OPTIONS METHOD
          $headers = [
              'Access-Control-Allow-Methods'=&gt; 'POST, GET, OPTIONS, PUT, DELETE',
              'Access-Control-Allow-Headers'=&gt; 'Content-Type, X-Auth-Token, Origin'
          ];
  
          if($request-&gt;getMethod() == "OPTIONS") {
              // The client-side application can set only headers allowed in Access-Control-Allow-Headers
              return Response::make('OK', 200, $headers);
          }
  
          $response = $next($request);
          foreach($headers as $key =&gt; $value)
              $response-&gt;header($key, $value);
  
          return $next($request);
      }
  }
  </code></pre>
  
  <p>Finally here is user creating function</p>
  
  <pre><code>protected function create(array $data)
  {
      return User::create([
          'name' =&gt; $data['name'],
          'email' =&gt; $data['email'],
          'password' =&gt; bcrypt($data['password']),
      ]);
  }
  
  protected function registerUser(Request $request)
  {
      $data = $request-&gt;all();
      return response()-&gt;json($this-&gt;create($data));
  }
  </code></pre>
  
  <p>When I send the post request from react app following error is shown at console</p>
  
  <blockquote>
    <p>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <a href="http://incomeexpense.stacklearning.com/api/users" rel="nofollow noreferrer">http://incomeexpense.stacklearning.com/api/users</a>. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).</p>
    
    <p>TypeError: "NetworkError when attempting to fetch resource." Register.js:39 
    Cross-Origin Request Blocked: </p>
    
    <p>The Same Origin Policy disallows reading the remote resource at <a href="http://incomeexpense.stacklearning.com/api/users" rel="nofollow noreferrer">http://incomeexpense.stacklearning.com/api/users</a>. (Reason: CORS request did not succeed).</p>
  </blockquote>
  
  <p>I know this error is due to different domain and browser prevent resource access to different domain. </p>
  
  <p>I just want to know what I need need to do at front and at back end to make things right</p>
  
  <p>PS: back end code works perfectly while sending request from postman.</p>