title: No 'Access-Control-Allow-Origin' header is present on the requested resource. [Django-React Setup]
body: <p>Trying to call a Django API via React. But CORS does not seem to be working properly.</p>
  
  <p>settings.py (django)</p>
  
  <pre><code>ALLOWED_HOSTS = ['*']
  INSTALLED_APPS = [
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
      'oauth2_provider',
      'rest_framework',
      'accounts',
      'products',
      'corsheaders',
  ]
  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.security.SecurityMiddleware',
      'django.contrib.sessions.middleware.SessionMiddleware',
      'django.middleware.common.CommonMiddleware',
      'django.middleware.csrf.CsrfViewMiddleware',
      'django.contrib.auth.middleware.AuthenticationMiddleware',
      'django.contrib.messages.middleware.MessageMiddleware',
      'django.middleware.clickjacking.XFrameOptionsMiddleware',
      'oauth2_provider.middleware.OAuth2TokenMiddleware',
  ]
  CORS_ORIGIN_ALLOW_ALL = True
  </code></pre>
  
  <p>API in chrome browser,</p>
  
  <pre><code>GET /products/view/
  HTTP 200 OK
  Allow: GET, HEAD, OPTIONS
  Content-Type: application/json
  Vary: Accept
  
  [
      {
          "id": 5,
          "name": "product_updated",
          "image": "...",
          "cost": "50.00",
          "avail_quantity": 100,
          "desc": "Good",
          "rating": "3.60",
          "users_rated": 100
      },
      {
          "id": 14,
          "name": "Dark Coffee",
          "image": "...",
          "cost": "50.00",
          "avail_quantity": 100,
          "desc": "Good",
          "rating": "3.60",
          "users_rated": 100
      }
  ]
  </code></pre>
  
  <p>React component:</p>
  
  <pre><code>import React, { Component } from 'react'
  
  class Dashboard extends Component {
  
    constructor(props) {
      super(props)
      this.state = {
        text: '127.0.0.1:8000',
        productList: []
      }
       this.fetchProducts = this.fetchProducts.bind(this)
    }
  
   fetchProducts(){
       fetch(`http://127.0.0.1:8000/products/view`, {
           method: "GET",
            }).then(res=&gt; res.json())
              .then(res=&gt; {
                console.log(res, typeof res, res.length)
              this.setState({productList: res})
            })
        console.log(this.state.productList)
  }
  
  
   componentWillMount(){
      this.fetchProducts()
   }
  
  render() {
    var list = []
    for (let i = this.state.productList.length-1; i &gt;= 0; i--) {
          list.push(&lt;li&gt;{this.state.productList[i].name}&lt;/li&gt;)
          console.log(list)
        }
    return (
      &lt;div className="dashboard"&gt;
  
      &lt;h1&gt;Welcome To Bear State Coffee!&lt;/h1&gt;
      &lt;h3&gt;Products: &lt;/h3&gt;
      &lt;ul&gt;
        {list}
      &lt;/ul&gt;
  
      &lt;/div&gt;
    )
  }
  }
  
  export default Dashboard
  </code></pre>
  
  <p>Console on running Dashboard on react server</p>
  
  <blockquote>
    <p>Failed to load <a href="http://127.0.0.1:8000/products/view" rel="nofollow noreferrer">http://127.0.0.1:8000/products/view</a>: Redirect from
    '<a href="http://127.0.0.1:8000/products/view" rel="nofollow noreferrer">http://127.0.0.1:8000/products/view</a>' to
    '<a href="http://127.0.0.1:8000/products/view/" rel="nofollow noreferrer">http://127.0.0.1:8000/products/view/</a>' has been blocked by CORS
    policy: No 'Access-Control-Allow-Origin' header is present on the
    requested resource. Origin '<a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a>' is therefore not
    allowed access. If an opaque response serves your needs, set the
    request's mode to 'no-cors' to fetch the resource with CORS disabled.
    localhost/:1 Uncaught (in promise) TypeError: Failed to fetch</p>
  </blockquote>
  
  <p>Edit: Set of response from browser (<a href="http://127.0.0.1:8000/products/view/" rel="nofollow noreferrer">http://127.0.0.1:8000/products/view/</a>) </p>
  
  <pre><code>OPTIONS /products/view/
  HTTP 200 OK
  Allow: GET, HEAD, OPTIONS
  Content-Type: application/json
  Vary: Accept
  
  {
      "name": "Products",
      "description": "GET: For viewing all products",
      "renders": [
          "application/json",
          "text/html"
      ],
      "parses": [
          "application/json",
          "application/x-www-form-urlencoded",
          "multipart/form-data"
      ]
  }
  </code></pre>