I am trying to do my first app in react native and django rest framework.
I created a simple server based on tutorial with default login page.
I am trying to make a POST to this login page, but I am getting error:
Forbidden (CSRF cookie not set.): /api-auth/login/
My POST looks like:
const sendLoginCredencials = (data) => {
axios.defaults.headers.common['X-CSRF-TOKEN'] = data.csrf_token;
axios.post('http://127.0.0.1:8000/api-auth/login/',
{
username: 'username',
password: 'passwd',
},
)
.then((response) => {
console.log(response)
})
.catch(error => {
console.error('error', error);
});
}
Settings.py has this lines:
from corsheaders.defaults import default_headers
CORS_ALLOW_HEADERS = list(default_headers) + [
'X-CSRF-TOKEN',
]
CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_CREDENTIALS = True
CSRF_COOKIE_SECURE = True
CSRF_COOKIE_NAME = "csrftoken"
CSRF_HEADER_NAME = 'X-CSRF-TOKEN'
I have tested many answers and combinations. None of them worked and I admit that I feel confused. Could anyone tell me how to set the header correctly and what excatly I should set in settings.py ?
Best regards!
Related
I'm new to Django and trying to build basic user authentication with REST API and a Vue.js frontend. To send the request, I am using axios, which is configured first in a seperate composable axios.js:
import axios from 'axios'
axios.defaults.withCredentials = true
axios.defaults.baseURL = 'http://localhost:8000'
and used inside a register.vue component:
const submitRegistration = () => {
axios.post('api/v1/users/', {username: 'userName', password: 'userPassword'})
.then(res => {
console.log(res)
})
}
To make it simple, I'm sending a data-object with predefined strings, as you can see above. The request gets sent to one of the djoser routes in projectName/urls.py:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('api/v1/', include('djoser.urls')),
path('api/v1/', include('djoser.urls.authtoken')),
]
This however, throws a 401 Unauthorized Error:
code: "ERR_BAD_REQUEST"
config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
message: "Request failed with status code 401"
name: "AxiosError"
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: true, upload: XMLHttpRequestUpload, …}
response: {data: {…}, status: 401, statusText: 'Unauthorized', headers: AxiosHeaders, config: {…}, …}
stack: "AxiosError: Request failed with status code 401\n at settle (http://localhost:3000/node_modules/.vite/deps/axios.js?v=a45c5ec0:1120:12)\n at XMLHttpRequest.onloadend (http://localhost:3000/node_modules/.vite/deps/axios.js?v=a45c5ec0:1331:7)"
I've configured settings.py like so:
INSTALLED_APPS = [
...,
'corsheaders',
'rest_framework',
'rest_framework.authtoken',
'djoser'
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...,
]
CORS_ALLOWED_ORIGINS = ['http://localhost:3000']
CORS_ALLOW_CREDENTIALS = True
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': (
'rest_framework.authentication.TokenAuthentication',
),
'DEFAULT_PERMISSION_CLASSES': (
'rest_framework.permissions.IsAuthenticated',
)
}
Edit:
The problem might be caused by authToken. In the root vue component app.vue, I am checking the store for an authentication token and setting an axios header accordingly:
onMounted(() => {
if (store.authToken) {
axios.defaults.headers.common['Authorization'] = `Token ${store.authToken}`
}
})
If I remove this code, the error turns into 400 BAD_REQUEST. Although I don't understand why one would need an authToken when registering a new user.
store.authToken is set during initialization:
import {reactive} from "vue";
export const store = reactive({
authToken: localStorage.authToken ?? null,
})
and shoud be null, when a new user is registered.
Edit2:
I followed some advice and used Postman to send the post request to http://localhost:8000/api/v1/users/ and it works. A new user is created.
My authentication check in the vue root component app.vue was flawed:
<script setup>
onMounted(() => {
if (store.authToken) {
axios.defaults.headers.common['Authorization'] = `Token ${store.authToken}`
}
})
</script>
store.authToken always returned true despite being null because it was fetched from localStorage being a string. JSON.parse() solved the problem.
I am quite new in Django rest framework. I have a project which contain Django restframework API inside a Django site project(with simple frontend code) and it works fine in my local environment. However in the production domain(HTTPS) it shows as below:
Mixed Content: The page at 'https://<my production domain>/audience/labeling_jobs/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://<my production domain>/audience/labeling_jobs/api/jobs/?page=2'. This request has been blocked; the content must be served over HTTPS.
I have setup the configuration about SSL/HTTPS according to Django document SSL/HTTPS beforehand but it still got this error.
USE_X_FORWARDED_HOST = True
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True
SECURE_CONTENT_TYPE_NOSNIFF = True
SECURE_HSTS_INCLUDE_SUBDOMAINS = True
SECURE_HSTS_PRELOAD = True
SECURE_SSL_REDIRECT = True
It seems that the Django rest cannot get the correct HTTPS, but it works fine with other django paths, they can be showed on the production page.
Is there anything I have missed?
EDIT:
Below is the code which request the django rest api:
the function is trying to shows the django labeling_jobs data via restframework API, and paging.
{% block custom_script %}
<script type="module">
const Jobs = {
data() {
return {
job_api_url: '{% url "labeling_jobs:api-job-detail" %}',
data: '',
next_page_url: null,
previous_page_url: null,
}
},
mounted() {
this.getJobs()
},
computed: {
jobs() {
return this.data.results
}
},
methods: {
async getJobs(url) {
url = url ? url : this.job_api_url
const response = await axios.get(url)
this.data = await response.data
this.next_page_url = this.data.next
this.previous_page_url = this.data.previous
},
next_page() {
console.log(this.next_page_url)
if (this.next_page_url) {
this.getJobs(this.next_page_url)
}
},
previous_page() {
console.log(this.previous_page_url)
if (this.previous_page_url) {
this.getJobs(this.previous_page_url)
}
}
}
}
const app = Vue.createApp(Jobs)
app.config.compilerOptions.delimiters = ['[[', ']]']
app.mount('#wrapper')
</script>
{% endblock %}
EDIT 2
I found the problem is something related to the paging django restframework, when I place the API url on the browser with production host view them under django rest ui, it is OK, but it fails when I try to move to next page.
I have fixed this problem,
by adding <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> in the head of base.html and adding the following config in the settings.py :
USE_X_FORWARDED_HOST = True
SECURE_PROXY_SSL_HEADER = ('X-FORWARDED-PROTO', 'https')
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True
SECURE_CONTENT_TYPE_NOSNIFF = True
SECURE_HSTS_INCLUDE_SUBDOMAINS = True
SECURE_HSTS_PRELOAD = True
And it can show the contents by sending the correct HTTPS url without redirect to the wrong HTTP domain name.
But I still think it is not a best answer, I will dive into django restframework pagination maybe with relative url to try to get something more robust.
I use Django with graphene for back-end and Nuxt for front-end. The problem appears when I try post requests from nuxt to django. In postman everything works great, in nuxt I receive a 403 error.
Django
# url.py
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', GraphQLView.as_view(graphiql=settings.DEBUG,
schema=schema)),
]
# settings.py
CORS_ORIGIN_WHITELIST = 'http://localhost:3000'
CORS_ALLOW_CREDENTIALS = True
CSRF_USE_SESIONS = False
CSRF_COOKIE_HTTPONLY = False
CSRF_COOKIE_SAMESITE = None
NuxtJs
# nuxt.config.js
axios: {
baseURL: 'http://127.0.0.1:8000/',
debug: false,
progress: true,
credentials: true
},
# plugins/axios.js
await $axios.onRequest((config) => {
config.headers.common['Content-Type'] = 'application/json'
config.xsrfCookieName = 'csrftoken'
config.xsrfHeaderName = 'X-CSRFToken'
const csrfCookie = app.$cookies.get('csrftoken')
config.headers.common['X-CSRFToken'] = csrfCookie
console.log(config)
# store/contact.js
import { AddMessage } from '../queries/contact.js'
export const actions = {
async send() {
const message = await this.$axios({
url: 'api/',
method: 'POST',
data: AddMessage
})
}
}
# queries/contact.js
export const AddMessage = {
query: `
mutation AddContact($input: AddMessageInput!){
addMessage(input: $input){
message{
name
email
body
terms
}
}
}
`,
variables: `
{
"input":{
"name": "test",
"email": "test#test.com",
"body": "test",
"terms": true,
}
}
`,
operationName: 'AddMessage'
}
Somethig that
Here are request headers from axios post. Something strange for me is the cookie with a wrong value. The good value of token is present in X-CSRFToken header.
Here is the log from axios post request. Another strange thing for me is the undefined headers: Content-Type and X-CSRFToken
Thank you!
I resolved this problem and I want to share the solution here.
The problem with wrong cookie value was generated by the front end app that managed (I don't remember how) to get csrf cookie from the back end app. In X-CSRFToken header was token received from response's Set-cookie header and in Cookie header was the cookie from back end app.
After I changed localhost with 127.0.0.1 and added
config.xsrfCookieName = 'csrftoken' in axios plugin
I was able to separate the apps, save and use cookies independent.
The second problem, with undefined headers was generated by axios. These 2 line of code resolved the problem. These were added also in axios onRequest method.
config.xsrfHeaderName = 'X-CSRFToken'
config.headers['Content-Type'] = 'application/json'
I have this problem where i get the response when trying to use a rest api: "Access to fetch at 'https://kollektivet.app:8082/api/login/' from origin 'https://kollektivet.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request."
Picture of response when trying to fetch
This happens when i try any of the rest api's I am using. From what i have read, this error means I am trying to re-direct, which I am not.
The backend is Django and looks like this:
#csrf_exempt
#api_view(["POST"])
#permission_classes((AllowAny,))
def register(request,):
password = request.data.get("password", "")
email = request.data.get("email", "")
if not email and not password and not email:
return Response(
data={
"message": "username, password and email is required to register a user"
},
status=status.HTTP_400_BAD_REQUEST
)
new_user = User.objects.create_user(
email=email, password=password
)
return Response(status=status.HTTP_201_CREATED)
And the front-end is in react which looks like this:
createUser(event) {
event.preventDefault();
let data = {
name: this.state.name,
password: this.state.password,
repeatPassword: this.state.repeatPassword,
email: this.state.email
};
if (this.state.name !== '' && this.state.password !== '' && this.state.email !== '' && this.checkPasswords()) {
console.log('name', this.state.name, 'password ', this.state.password, 'email ', this.state.email);
fetch("https://kollektivet.app:8082/api/register/", {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
mode: "cors",
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));
this.setState({message: "Du er nå registrert! For å aktivere din konto trykk på linken som vi har sendt til deg på epost"});
this.setState({name: ""});
this.setState({password: ""});
this.setState({repeatPassword: ""});
this.setState({email: ""});
}
}
I Do have this is the Django settings file:
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_HEADERS = (
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
)
I am running this on apache2 if this is relevant.
The port 8082 is also closed. Does this need to be open when it is on the same server?
Thanks!
You're being redirected to site.site.comapi/register/
Do you have some other middleware that does this? Maybe in Apache config?
Note it's a 301 so your browser has cached this response and will now always redirect there even if your rove the code that resulted in this redirect, or even if you stop Django from running.
So you will need to also clear your redirect cache in the browser.
This is why I don't like 301 responses. 302 are much more polite.
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',
]
In settings.py, if I arrange my MIDDLEWARE array like this, it will work fine.
But if I move corsheaders.middleware.CorsMiddleware to the last line, that error will occur
Just writing my story here in case anybody may have the same issue as mine.
Basically, this is a server end issue, so no need to change anything at the front end.
For this error message, it indicated that the OPTIONS requests got a
response with the status code in either 301 Moved Permanently", "307
Temporary Redirect", or "308 Permanent Redirect".
Please check your requested URL with the 'location' attribute from the OPTIONS response, see if they are the same or not.
For me, the issue was my request URL is **"https://server.com/getdata"**
but the URL I set on the server was **"https://server.com/getdata/"**
then the server give me an 308 to correct it with the '/', this works for POST, GET and HEAD, but not OPTIONS.
I'm using flask, flask_restful and the flask_cors.
use this will also solve this redirect issue for me.
app.url_map.strict_slashes = False
I had the same problem until I discovered that the redirect was caused by the Django internationalization framework, where all urls get a i18n url extension such as /en/path_to_resource when actually path_to_resource was requested. The internationalization framework achieves this through a 302 redirect.
The solution to this problem is to keep the rest-api urls outside the section with the i18n_patterns. The resulting urls.py might then look like
urlpatterns = [
path('i18n/', include('django.conf.urls.i18n')),
path('rest/', include(('rest.urls', 'rest'), namespace='rest')),
]
urlpatterns += i18n_patterns(
path('admin/', admin.site.urls),
path('jsi18n/', JavaScriptCatalog.as_view(), name='javascript-catalog'),
path('my_app/', include(('my_app.urls', 'my_app'), namespace='my_app')),
)
I'm having issues finding the answer anywhere to an issue I'm having related to the (I think) Authorization header in an HTTP request I'm sending from Angular 4 to the Django Rest Framework API I've created. Lets get down to it:
EDIT:
Confirmed that the problem relates to authorization since I am also using django-cors-headers now to rid myself of CORS issues for the 4200 port (since it is considered a different origin). The problem that remains is simply that I get the message "Unauthorized" when making requests towards the API. I'm starting to think it is an encoding issue since the following message is shown when I attempt the following request with httpie:
http GET http://localhost:8000/api/groups/ "Authorization: Basic admin:password"
And then the message is shown:
{
"detail": "Invalid basic header. Credentials not correctly base64 encoded."
}
In settings.py, I've made sure that both a permission class and authentication class have been made available.
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': [
'rest_framework.authentication.BasicAuthentication',
],
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.IsAdminUser'
],
...
CORS_ORIGIN_WHITELIST = [
'localhost:4200',
]
In views.py, this is perhaps where my fault is since the console error I get when trying to send the request from Angular -> Rest API is that 'No 'Access-Control-Allow-Origin' header is present on the requested resource.' which is untrue since it does NOT complain about this when I remove the authentication need.
class UserViewSet(viewsets.ModelViewSet):
queryset = User.objects.all().order_by('-date_joined')
serializer_class = UserSerializer
permission_classes = (IsAdminUser, )
authentication_classes = (BasicAuthentication, )
def list(self, request):
queryset = User.objects.all().order_by('-date_joined')
serializer = UserSerializer(queryset, many=True, context={'request': request})
return Response(serializer.data,
status=200)
The Angular dev server is running on localhost:4200 while django is left on its default of localhost:8000.
I'll include the urls.py for good measure:
from django.conf.urls import url, include
from rest_framework import routers
from backend.api import views
from django.contrib import admin
router = routers.DefaultRouter()
router.register(r'users', views.UserViewSet)
router.register(r'groups', views.GroupViewSet)
router.register(r'info', views.InfoViewSet)
urlpatterns = [
url(r'^api/', include(router.urls)),
url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
url(r'^admin/', admin.site.urls),
]
NOTE that I can make the request and get a response just fine with httpie using the authorization header like so:
http GET http://localhost:8000/api/users/ -a admin:password
Finally, here is the Angular code for making the request (I included everything so that imports can be checked as well):
import { Component, OnInit } from '#angular/core';
import { HttpClient, HttpHeaders } from '#angular/common/http';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
results: string[];
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.http.get(
'http://localhost:8000/api/users/',
{ headers: new HttpHeaders().set('Authorization', 'Basic admin:password'), }
).subscribe(
data => {
this.results = data;
},
err => {
console.log("ERROR RETREIVING USERS");
});
}
}
I have also imported HttpClientModule and listed it under 'imports' in my app.module.
Separate ports are considered different origins, so you will of course, get a Cross-Origin error (CORS) on localhost. This is a browser security feature alongwith your server.
Instal django-cross-header package for resolving cross-domain error.
I use the same Backend Framework , and the solution I've found was to build my project with the right host using
ng build --production -host=myDomain.com // try localhost -p 8080 in your case
and replace
Access-Control-Allow-Origin: 'http://localhost:4200'
with
Access-Control-Allow-Origin: '*'
The problem was solved in two ways. Firstly, I did not correctly ensure that CORS would be enabled from the origin of where Angular 4 was sending the request. #kmcodes solution of using django-cors-headers was a good one and I no longer had an issue with 'Access-Control-Allow-Origin' being missing after adding it to my project.
The second part of the problem was in the header I was putting on to the request sent by Angular 4. The following was the change I needed to make:
this.http.get(
'http://localhost:8000/api/users/',
{ headers: new HttpHeaders().set('Authorization', 'Basic admin:password'), }
).subscribe(
data => {
this.results = data;
},
err => {
console.log("ERROR RETREIVING USERS");
});
To this:
this.http.get(
'http://localhost:8000/api/users/',
{ headers: new HttpHeaders().set('Authorization', 'Basic ' + btoa('admin:password')), }
).subscribe(
data => {
this.results = data;
},
err => {
console.log("ERROR RETREIVING USERS");
});
I got the hint when using httpie to inspect my request and saw that when I didn't use the -a flag to add authentication parameters but rather the 'Authorization' header. This gave me an error stating that the request failed with error code 401, unauthorized, since the username:password part was not encoded with base64. In Angular 4 (and maybe before) btoa() solves this as above.