0

I am trying to make an API GET request from a React & Redux app to a Django app, but am getting an error about CORS with a 301 response. Below is the response

Here is the React & Redux code:

const fetchClasses = createAsyncThunk(
  GET_CLASSES,
  async (id) => {
    const CLASSES_API = `http://127.0.0.1:8000/learning/classes?schoolPk=${id}`;
    const response = await fetch(CLASSES_API);
    const data = await response.json();
    return data;
  },
);

When I use the same code to fetch all schools, it works. But when I add the id params to get all classes in a certain school, that's when I get the error. Below is the views.py code in Django.

# Create your views here.
class SchoolViewSet(viewsets.ModelViewSet):
   queryset = School.objects.all()
   serializer_class = SchoolSerializer

class ClassViewSet(viewsets.ModelViewSet):
serializer_class = ClassSerializer

def get_queryset(self):
    return Class.objects.filter(school=self.request.query_params['schoolPk'])

I have tried setting CORS in Django settings.py file.

ALLOWED_HOSTS = ['http://localhost:3000/', '127.0.0.1',]

CORS_ALLOWED_ORIGINS = ['http://localhost:3000',]


CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000',
)

CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_CREDENTIALS = True

CORS_ALLOW_METHODS = [
    "DELETE",
    "GET",
    "OPTIONS",
    "PATCH",
    "POST",
    "PUT",
]

CORS_ALLOW_HEADERS = [
    "accept",
    "accept-encoding",
    "authorization",
    "content-type",
    "dnt",
    "origin",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",
]

CORS_EXPOSE_HEADERS = [
    "accept",
    "accept-encoding",
    "authorization",
    "content-type",
]

CORS_ALLOW_CREDENTIALS = True

I am thinking I could be missing something in React because every request is working perfectly in Postman

What could I be missing please?

Yilmaz
  • 35,338
  • 10
  • 157
  • 202
Nduati
  • 75
  • 6

1 Answers1

1

CORS is used to protect the client from cookie stealing and postman is not a client. that is why you dont get error from postman.

in settings.py

INSTALLED_APPS = [
    //..
    'corsheaders',
    'rest_framework',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    
]


ALLOWED_HOSTS = ["127.0.0.1","localhost"]

If those does not fix it, in package.json add proxy

  "proxy": "http://127.0.0.1:8000",
Yilmaz
  • 35,338
  • 10
  • 157
  • 202
  • Hello @Yilmaz. I had done the settings in *settings.py*. So now I have tried adding the proxy in *package.json*, but the response is still the same. Nothing changed. – Nduati Feb 22 '23 at 18:46
  • did u restart the server – Yilmaz Feb 22 '23 at 18:47
  • I had not restarted the server. After restarting it now it is working. One last question, is it safe to use that hack in production? – Nduati Feb 22 '23 at 19:29
  • cors policy is not a hack it is a security system. you build a server and since your server produces sensisitve data, you want to have only certain clients to have access to it. when you deploy your app react and django will be deployed separately in you will add your producition address of your react app into `ALLOWED_HOSTS = ["127.0.0.1","localhost","productionAppDomain.herokuapp.com"]` – Yilmaz Feb 22 '23 at 19:51