Json Web Token, Axios 401-Unauthorized, Django, Vue.js - django

Every time i do a GET request to API from FrontEnd or POSTMAN to secured (isAuthenticated) content, i get 401 error(Unauthorized).
I have two servers:
1.Django, django-rest-framework, with Json Web Token.(API)
2.Vue.js
api endpoints:
Registration (AllowAny): http://holykrava.hopto.org:8002/user-api/register/
Login (AllowAny): http://holykrava.hopto.org:8002/user-api/get-token/
List of Users (IsAuthenticated): http://holykrava.hopto.org:8002/user-api/user-list/
Vue-Part
<script>
//import {HTTP} from './http-common';
import axios from 'axios'
export default {
created() {
//let tokenOld = localStorage.getItem('token')
let token = this.$store.state.token
axios.get(
'http://holykrava.hopto.org:8002/user-api/user-list/',
{headers: {
authorization: token
}}
)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
})
}
}
</script>
Chrome Dev Tool (Network-Logs)
General-Headers:
Request URL: http://holykrava.hopto.org:8002/user-api/user-list/
Request Method: GET
Status Code: 401 Unauthorized
Remote Address: 188.190.62.145:8002
Referrer Policy: no-referrer-when-downgrade
Request-Headers:
Provisional headers are shown
Accept: application/json, text/plain, */*
Authorization: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6Im11dGFwdXRhIiwiZXhwIjoxNTMxODUxODg0LCJlbWFpbCI6IiIsIm9yaWdfaWF0IjoxNTMxNzY1NDg0fQ.LGji_eCDVIvGpQ9xDEO2QAISEEW9FpHVcwRl6Oz9cCM
Origin: http://localhost:8080
Referer: http://localhost:8080/?
Response-Headers:
Access-Control-Allow-Origin: *
Allow: GET, HEAD, OPTIONS
Content-Length: 58
Content-Type: application/json
Date: Mon, 16 Jul 2018 19:34:45 GMT
Server: WSGIServer/0.2 CPython/3.6.4
Vary: Accept
WWW-Authenticate: JWT realm="api"
X-Frame-Options: SAMEORIGIN
IT Works in Terminal like this:
get token:
curl -X POST -d "username=userusername&password=userpassword" http://holykrava.hopto.org:8002/user-api/get-token/
pass token:
curl -H "Authorization: JWT eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjo0MCwidXNlcm5hbWUiOiJ1c2VydXNlcm5hbWUiLCJleHAiOjE1MzE4NDAxNTAsImVtYWlsIjoiIiwib3JpZ19pYXQiOjE1MzE3NTM3NTB9.SoITxagpmbviEFl_Iy086Jy0KgAUNV0WW-a3wMM_Fos" http://holykrava.hopto.org:8002/user-api/user-list/
corsheaders.middleware.CorsMiddleware, installed
CORS_ORIGIN_ALLOW_ALL = True
Default Authintication Class:
'rest_framework_jwt.authentication.JSONWebTokenAuthentication'
i spend two days trying to figure out whats wrong, but failed
looking for some1 who can help! thanks.

Related

Fetch CouchDB to authenticate using cookie

I'm trying to authenticate against couchdb using this documentation
When I do
# first request
const url = 'http://localhost:5984/_session'
fetch(url, {
method: 'POST',
headers: {
"Content-Type": "application/json",
},
body : JSON.stringify({
"name": "my_username",
"password": "my_password"
}),
}).then( data => {
console.log(data)
}).catch(e => {
console.log('Error', e)
})
If one of my_username or my_password IS NOT right i get:
body: (...)
bodyUsed: false
headers: Headers {}
ok: false
redirected: false
status: 401
statusText: "Unauthorized"
type: "cors"
url: "http://localhost:5984/_session"
which is fine.
But, if one of my_username or my_password IS right i get:
body: ReadableStream
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "http://localhost:5984/_session"
instead of
HTTP/1.1 200 OK
Cache-Control: must-revalidate
Content-Length: 43
Content-Type: application/json
Date: Mon, 03 Dec 2012 01:23:14 GMT
Server: CouchDB (Erlang/OTP)
Set-Cookie: AuthSession=cm9vdDo1MEJCRkYwMjq0LO0ylOIwShrgt8y-UkhI-c6BGw; Version=1; Path=/;
HttpOnly
{"ok":true,"name":"root","roles":["_admin"]} // <-- i expect that
And no cookie set.
I also tried curl, it works :
> curl http://localhost:5984/_session
{"ok":true,"userCtx":{"name":null,"roles":[]},"info":{"authentication_handlers":
["cookie","default"]}}
> curl -X POST http://localhost:5984/_session -H "Content-Type: application/json" -d '{"name":"my_username","password":"my_password"}'
{"ok":true,"name":"my_username","roles":["_admin"]}
But I need it to work in a react app, from http:localhost:3000
Maybe it's CORS related? I enabled CORS in CouchDB settings.
How can i modify the first request in order to get the user object for the name/password supplied?
I think Authentication Set-Cookie produce by backend server not by front end. So you need backend like Node.js to get cookie and then get it again from your front end.

Thumbnail upload - Request forbidden by administrative rules

Following this tutorial -> https://developer.vimeo.com/api/upload/thumbnails
I have setup a time of 180s and the request of step 2 has returned status 201.
all the links have a similar format:
https://i.vimeocdn.com/video/<id>_<size>.jpg?r=pad'
Here is the request:
{ protocol: 'https:',
host: 'i.vimeocdn.com',
port: 443,
method: 'PUT',
headers:
{ 'Content-Type': 'image/jpg',
Accept: 'application/vnd.vimeo.*+json;version=3.4',
'User-Agent': 'Vimeo.js/2.1.1',
Authorization: 'Bearer 9a3918a750089766b46f0e8a59a79f49',
'Content-Length': 189 },
body:
'_readableState=&readable=true&_events=&_eventsCount=1&_maxListeners=&path=%2Ffile.jpg&fd=&flags=r&mode=438&start=&end=&autoClose=true&pos=&bytesRead=0&closed=false',
path: '/video/<id>_1920x1080.jpg' }
}
I've tried with that URI but allways get this result:
<html><body><h1>403 Forbidden</h1>
Request forbidden by administrative rules.
</body></html>
{ connection: 'close',
'cache-control': 'no-cache',
'content-type': 'text/html',
'accept-ranges': 'bytes, bytes',
via: '1.1 varnish, 1.1 varnish',
'access-control-allow-origin': '*',
date: 'Wed, 10 Jun 2020 16:59:05 GMT',
'x-served-by': 'cache-dfw18638-DFW, cache-ewr18125-EWR',
'x-cache': 'MISS, MISS',
'x-cache-hits': '0, 0',
'x-timer': 'S1591808345.129097,VS0,VE49',
'transfer-encoding': 'chunked' }
The token has the following access:
private create edit upload video_files public
I've tried to do the PUT request to the api hostname, but the page couldn't be found.
Any ideas?
Thanks in advance.
I've used the wrong link, the PUT request must be to a link that looks like this:
https://i.cloud.vimeo.com/video/<id>?expires=<timestamp>&sig=<hash>

CORS on AWS API Gateway and S3

I am calling an AWS API which uses lambda function. I am calling it from a HTML page which is hosted in S3 (static web hosting). While calling the API I get CORS error:
Access to XMLHttpRequest at '' from origin
'' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
I have tried it after enabling CORS on API, Specifying CORS on S3 bucket but it is not working.
Seems, I am missing the right place where CORS headers are to be specifies.
Additional information:
I get following information in chrome developer tool
**Response Headers**
content-length: 42
content-type: application/json
date: Mon, 24 Feb 2020 04:28:51 GMT
status: 403
x-amz-apigw-id: IYmYgFQvoAMFy6Q=
x-amzn-errortype: MissingAuthenticationTokenException
x-amzn-requestid: 79b18379-383d-4ddb-a061-77f55b5727c3
**Request Headers**
authority: apiid-api.us-east-1.amazonaws.com
method: POST
path: /Prod
scheme: https
accept: application/json, text/javascript, */*; q=0.01
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9,hi;q=0.8
access-control-allow-headers: Origin, X-Requested-With, Content-Type, Accept, Authorization
access-control-allow-methods: GET, OPTIONS
access-control-allow-origin: https://apiid.execute-api.us-east-1.amazonaws.com/Prod
content-length: 117
content-type: application/json; charset=UTF-8
origin: http://example.com
referer: http://example.com/
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36
Lambda function code:
var AWS = require('aws-sdk');
var ses = new AWS.SES();
var RECEIVER = 'example#gmail.com';
var SENDER = 'example#gmail.com';
var response = {
"isBase64Encoded": false,
"headers": { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'},
"statusCode": 200,
"body": "{\"result\": \"Success.\"}"
};
exports.handler = function (event, context) {
console.log('Received event:', event);
sendEmail(event, function (err, data) {
context.done(err, null);
});
};
function sendEmail (event, done) {
var params = {
Destination: {
ToAddresses: [
RECEIVER
]
},
Message: {
Body: {
Text: {
Data: 'name: ' + event.name + '\nphone: ' + event.phone + '\nemail: ' + event.email + '\ndesc: ' + event.desc,
Charset: 'UTF-8'
}
},
Subject: {
Data: 'Website Referral Form: ' + event.name,
Charset: 'UTF-8'
}
},
Source: SENDER
};
ses.sendEmail(params, done);
}
No 'Access-Control-Allow-Origin' header is present on the requested resource.
This is saying that the resource you requested, your Lambda via API Gateway, is not returning an Access-Control-Allow-Origin header in its response; the browser is expecting the CORS headers in the response from the API (possibly because of an OPTIONS request), but the response doesn’t have them.
You’ve not said so specifically but I’m assuming you’re using a Lambda proxy integration on your API gateway. To solve your issue, add a Access-Control-Allow-Origin: * header to the response your Lambda returns. You’ve not specified the language your Lambda is written in, or provided your Lambda code, but if it was in NodeJS, a snippet of what you‘d return might look something like:
const result = {
statusCode: 200,
headers: {
'Access-Control-Allow-Origin': '*',
// other required headers
},
body: object_you_are_returning
};
return result;
Very surprisingly, the reason seems to be “the client-side shouldn't have 'Access-Control-Allow-Origin': '*'. That should only be in the Lambda code, apparently, and adding it to the jQuery code will cause the preflight to fail for some reason.”
https://github.com/serverless/serverless/issues/4037#issuecomment-320434887
Supplement information following the comment:
I also tried to use ajax hosted in S3 to call my Lambda function through API Gateway. I have tried many suggestions especially this solution (http://stackoverflow.com/a/52683640/13530447), but none of them works for me. In the developer-mode of Chrome, I kept seeing the error "Access to XMLHttpRequest at '[my API]' from origin '[my S3 website]' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response." I solved this by removing 'Access-Control-Allow-Origin': '*' in ajax. Still take the solution (http://stackoverflow.com/a/52683640/13530447) as an example, it will work by changing
$.ajax(
{
url: 'https://npvkf9jnqb.execute-api.us-east-1.amazonaws.com/v1',
headers: {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'
},
crossDomain: true,
type:'GET',
dataType: 'text',
success: function(data)
{
window.alert(data);
}
});
into
$.ajax(
{
url: 'https://npvkf9jnqb.execute-api.us-east-1.amazonaws.com/v1',
headers: {'Content-Type': 'application/json'},
crossDomain: true,
type:'GET',
dataType: 'text',
success: function(data)
{
window.alert(data);
}
});

Vue PWA login works in dev but returns 401 in production

I have a Vue.js PWA with a Django Rest Framework backend which works correctly locally on my laptop (using a browser). When I deploy it to production it continues to work correctly when I log in using a browser, however it fails to login when opened as a PWA (ie: on a phone or a PWA saved in a browser).
Here's my login code:
axios
.post("/api/get-token/", user)
.then(res => {
localStorage.setItem('user-token', res.data.token);
axios.defaults.headers.common['Authorization'] = res.data.token;
commit(AUTH_SUCCESS, res.data);
resolve(res);
})
.catch(err => {
commit(AUTH_ERROR, err);
reject(err);
});
As mentioned, everything works locally and in production when logging in via a browser. The problem comes when trying to log in using the PWA.
When trying to login to the PWA, I get the following:
POST https://www.example.com/api/get-token/ 401 (Unauthorized)
Doing a console log of the error received from the server I get:
{
detail: "Invalid token header. No credentials provided."
__proto__: Object
status: 401
statusText: "Unauthorized"
headers: {allow: "POST, OPTIONS", connection: "keep-alive", content-length: "59", content-type: "application/json", date: "Thu, 06 Feb 2020 15:00:11 GMT", …}
config:
url: "/api/get-token/"
method: "post"
data: "{"username":"test#example.com","password":"password"}"
headers:
Accept: "application/json, text/plain, */*"
Authorization: "Token "
Content-Type: "application/json;charset=utf-8"
__proto__: Object
transformRequest: [ƒ]
transformResponse: [ƒ]
timeout: 0
adapter: ƒ (t)
xsrfCookieName: "csrftoken"
xsrfHeaderName: "X-CSRFToken"
maxContentLength: -1
validateStatus: ƒ (t)
}
In production, the following works:
Log into the site using a browser on my laptop or on a phone.
Then open the PWA. This works correctly and I can continue using the PWA.
The only issue comes when trying to log in using the PWA.
Can you log in on a phone locally? I had this problem too once, the problem was that the frontend and backend were not running on the same host. This solved my problem:
devServer: {
proxy: {
'/api': {
target: 'http://localhost:5000'
}
}
}
I eventually figured out the issue. For some reason the following was being POSTed in the header: Authorization: "Token ".
This is really strange because when logging in using the /api/get-token/ there is no token required since this is the login route. Also, it works perfectly from a browser. The only issue is when trying from a PWA.
Anyway, changing the header to explicitly have no value for Authorization fixed the issue as follows: Authorization: ""

cookies not being sent over the server

I have a backbone app (residing on mywebsite.proj.io) that takes code sends it to the django server (authorization.proj.io) that exchanges the code for an access token (simple oauth exchange). I am using Chrome/49.0.2623.87.
The authorization.proj.io sends a cookie back to the client (mywebsite.proj.io) during the auth stage, but this cookie never gets sent back again on future requests. I do not think it is a cross domain cookie issue or a browser unable to set a cookie on a 302 redirect.
I would like to know why the cookie is not be sent to the server on subsequent requests.
Here are some details:
Step 1: Request Header.. Authentication Phase Request: Sending the Oauth 'code' from mywebsite.proj.io to the authorization.proj.io to get the access token. This request is through ajax. The cookie you see here may be from a previous request, but do not care at this point really
GET /fbauth/?code=fb_code_long_string&state=%7B%22client_id%22%3A34343642979%2C%22network%22%3A%22facebook%22%2
Host: authorization.proj.io
Referer: http://mywebsite.proj.io/contribute/?code=fb_code_long_string&state=%7B%22client_id%22%3A34343642979%2C%22network%22%3
Cookie: csrftoken=1MTginTGXLHAku5LMHAMLLTrQEX2M4jj; sessionid=igc8a7vidgbi8rzxgm7whgb5rh8uqxa9`
Step 2: Response Header.. Authentication Phase Response [authorization.proj.io responds with 302 and gets redirected to mywebsite.proj.io and sets cookie]
HTTP/1.0 302 FOUND
Server: WSGIServer/0.1 Python/2.7.10
Vary: Cookie
X-Frame-Options: SAMEORIGIN
Location: http://mywebsite.proj.io/contribute/#access_token=CAAE
Set-Cookie: csrftoken=g0BEHLD0HAH4vBQLQFpKOEn2andrYMhG; expires=Tue, 14-Mar-2017 22:00:16 GMT; Max-Age=31449600; Path=/
Set-Cookie: sessionid=igc8a7vidgbi8rzxgm7whgb5rh8uqxa9; expires=Tue, 29-Mar-2016 22:00:16 GMT; httponly; Max-Age=1209600; Path=/
Step 3: Later, js from mywebsite.proj.io sends a requests to authorization.proj.io.. No cookie is sent
GET /posts/gcc-speaker-training-on-april-25 HTTP/1.1
Host: authorization.proj.io
Connection: keep-alive
Accept: application/json, text/javascript, */*; q=0.01
Origin: http://mywebsite.proj.io
Authorization: Basic facebook:CAAEdTwh7fCMBAMEr6wC3ajZANVnZBMPenjseiNShjcXOJJ0PbiJ0GFXI7lSjzkP
DNT: 1
Referer: http://mywebsite.proj.io/contribute/
There were a few things I had to do to get this working.
It turns out that I was doing cross domain requests, and here is how I solved it:
1 : Ensure the server serving your pages has the Access-Control-Allow-Origin set.. I was using the http-server and did the following:
`http-server . --cors`
2 : I did the following for the ajax call
$.ajax('http://authorization.proj.io', {
type: "GET",
contentType: "application/json; charset=utf-8",
success: function(data, status, xhr) {
// do something;
},
error: function(jqxhr, textStatus, errorThrown) {
console.log("cannot get orgs");
},
xhrFields: {
withCredentials: true
},
crossDomain: true
});
Note the xhrFields and crossDomain.
3: I did the following in django settings.py:
CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
'mywebsite.ngrok.io',
'authorization.proj.io'
)
SESSION_COOKIE_DOMAIN=".proj.com"
I think the last bit was important so that the browser can send the cookie.. So perhaps not cross domain, but cross sub-domain.