Search code examples
djangoreactjsaxiosdjango-cors-headers

django-cors-headers is not working when the ID is added to the URL

Everything is working fine unless I add the member ID to the URL. Does anyone know why? Thank you in advance.

Working fine:

componentDidMount(){
    axios.get('http://localhost:8000/smsf/smsf_member/')
        .then(response =>{
            this.setState({members: response.data.results});
           console.log(response);
        });
}

Not working after I add the member id to the URL

componentDidUpdate(){
    if(this.props.id){
        console.log(this.props.id);
        axios.get('http://localhost:8000/smsf/smsf_member/' + this.props.id)
            .then(response =>{
                console.log(response);
            });
    }
}

url.py

router = routers.DefaultRouter()
router.register(r'staff_member', StaffMemberViewSet)
router.register(r'smsf_member', SMSFMemberViewSet)
router.register(r'documents', DocumentsViewSet)

urlpatterns = [
path('', include(router.urls)),
path('api-token-auth/', obtain_auth_token, name='api_token_auth'),
]

view.py

class SMSFMemberViewSet(viewsets.ModelViewSet):
    queryset = SMSFMember.objects.all()
    serializer_class = SMSFMemberSerializer

settings.py enter image description here

CORS_ORIGIN_ALLOW_ALL = True

error message: enter image description here

Solution

  • I think it could be caused because the second attempt URL is not ending in a /

    I experienced a similar issue in the past.

    Check out: https://docs.djangoproject.com/en/2.1/ref/settings/#append-slash

    Maybe with that and reordering your middlewares you can fix the problem.

    Good luck!