title: localhost: 3000 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. REACT and DJANGO
body: <p>I am able to get list of objects on <a href="http://127.0.0.1:8000/api/todos" rel="nofollow noreferrer">http://127.0.0.1:8000/api/todos</a> running on DJANGO,</p>
  <p>I wanna product detail page with id, <a href="http://127.0.0.1:8000/api/todos/14" rel="nofollow noreferrer">http://127.0.0.1:8000/api/todos/14</a>.</p>
  <p><a href="http://127.0.0.1:8000/api/todos/14" rel="nofollow noreferrer">http://127.0.0.1:8000/api/todos/14</a>. works fine in POSTMAN, and even in chrome. but in react I get</p>
  <p>Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/todos/14' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.</p>
  <p>I am using Axios.</p>
  <p><strong>Product.js</strong></p>
  <pre><code>const [dataItems, setDataItems] = useState([]);
  useEffect(() =&gt; {
  axios
    .get(&quot;http://127.0.0.1:8000/api/todos/&quot;)
    .then((res) =&gt; {
      console.log(res);
      setDataItems(res.data);
    })
    .catch((err) =&gt; {
      console.log(err);
    });
  </code></pre>
  <p>}, []);</p>
  <p><strong>ProductDetail.js</strong></p>
  <pre><code>const [detailItems, setDetailsItems] = useState([]);
  useEffect(() =&gt; {
      axios.get(&quot;http://127.0.0.1:8000/api/todos/14&quot;).then((res) =&gt; {
         console.log(res);
      });
      }, []);
  </code></pre>
  <p>I have installed django-cors-headers and <strong><a href="http://127.0.0.1:8000/api/todos" rel="nofollow noreferrer">http://127.0.0.1:8000/api/todos</a></strong> this work fine. Here is my settings.xml for cors-headers.</p>
  <p><strong>Settings.xml</strong></p>
  <pre><code>INSTALLED_APPS = [
  'django.contrib.admin',
  'django.contrib.auth',
  'django.contrib.contenttypes',
  'django.contrib.sessions',
  'django.contrib.messages',
  'django.contrib.staticfiles',
  'hero.apps.HeroConfig',
  'rest_framework.authtoken',
  'users.apps.UsersConfig',
  'rest_framework',
  'corsheaders',
  
  ]
  
  MIDDLEWARE = [
  'django.middleware.security.SecurityMiddleware',
  'django.contrib.sessions.middleware.SessionMiddleware',
  'corsheaders.middleware.CorsMiddleware',
  'django.middleware.common.CommonMiddleware',
  'django.middleware.csrf.CsrfViewMiddleware',
  'django.contrib.auth.middleware.AuthenticationMiddleware',
  'django.contrib.messages.middleware.MessageMiddleware',
  'django.middleware.clickjacking.XFrameOptionsMiddleware',
  
  
  ]
  
  CORS_ORIGIN_WHITELIST = [
      'http://localhost:3000'
  ]
  
  ACCOUNT_AUTHENTICATION_METHOD = 'email'
  ACCOUNT_EMAIL_REQUIRED = True
  ACCOUNT_USERNAME_REQUIRED = False
  </code></pre>
  <p><strong>urls.py</strong></p>
  <pre><code>from django.contrib import admin
  from django.urls import path, include
  from rest_framework import routers
  from . import views
  
  router = routers.DefaultRouter()
  router.register(r'todos', views.TodoView, 'todo')
  
  urlpatterns = [
  
      path('api/', include(router.urls)),
      path('', views.home),
  ]
  </code></pre>
  <p><strong>views.py</strong></p>
  <pre><code>from django.contrib import admin
  from django.urls import path, include
  from rest_framework import routers
  from . import views
  
  router = routers.DefaultRouter()
  router.register(r'todos', views.TodoView, 'todo')
  
  urlpatterns = [
  
  path('api/', include(router.urls)),
  ]
  </code></pre>
  <p><strong>Serializers.py</strong></p>
  <pre><code>from rest_framework import serializers
  from .models import Todo
  
  
  class TodoSerializer(serializers.ModelSerializer):
  class Meta:
      model = Todo
      fields = ('id', 'title', 'description', 'completed')
  </code></pre>
  <p>This api call works inside react and I can get list of object and console output</p>
  <pre><code>http://127.0.0.1:8000/api/todos 
  [
  {
      &quot;id&quot;: 14,
      &quot;title&quot;: &quot;First&quot;,
      &quot;description&quot;: &quot;first&quot;,
      &quot;completed&quot;: false
  },
  {
      &quot;id&quot;: 15,
      &quot;title&quot;: &quot;Second&quot;,
      &quot;description&quot;: &quot;second item&quot;,
      &quot;completed&quot;: false
  },
  {
      &quot;id&quot;: 16,
      &quot;title&quot;: &quot;Third&quot;,
      &quot;description&quot;: &quot;third item&quot;,
      &quot;completed&quot;: false
  }
  ]
  </code></pre>
  <p><a href="http://127.0.0.1:8000/api/todos/14" rel="nofollow noreferrer">http://127.0.0.1:8000/api/todos/14</a> doesn't work.</p>
  <p>I have seen similar question, but I am able to make connection with localhost:3000 and get all the values here. it just for the detail object with id not showing up.</p>