As described above I recieve a 419 everytime I try to post to a controller..
const handleSubmit = useCallback((_event) => {
window.axios.defaults.headers.common = {
'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
};
console.log(document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
axios.post('/bol/accounts/create', {
bol_public_key: '12345454',
bol_private_key: '123454'
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
}, []);
The token is in the request header so it should be fine?
:authority: *.ngrok.io
:method: POST
:path: /accounts/create
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: nl-NL,nl;q=0.9
cache-control: no-cache
content-length: 86
content-type: application/json;charset=UTF-8
origin: https://8be933f3b3a6.ngrok.io
pragma: no-cache
referer: https://*.ngrok.io/?hmac=564b7bb3c74e59e7a578e50f3bbfb318dfc3d7dea58820d9d66b46ade87b6659&locale=en-NL&new_design_language=true&session=d39033c75fb0a751a23596feae7cb86f704114e33b2bd1c676ddd1bea05ab759&shop=*.myshopify.com×tamp=1607901296
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
x-csrf-token: tUQk4qMxSNIvTx07oePArv94CEk2LedNmadu2Ozs
Related
Hi I have a frontend being served for testing from localhost making request to backend running at api.whatify.io which is an Nginx server fronting a Django backend.
The client app code is:
const axiosApi = axios.create({
baseURL: API_URL,
withCredentials: true,
})
export async function post(url, data, config = {}) {
return axiosApi
.post(url, {...data }, {withCredentials: true})
.then(response => response.data)
.then(response => {
console.log("response is", response);
console.log("WOW GOT", response.headers);
console.log("CUSTOM", response.headers.get("Cache-Control"));
})
}
The request and response headers are as follows as seen from browser:
Request URL: https://api.whatify.io/auth/login
Request Method: POST
Status Code: 302
Remote Address: 54.194.218.202:443
Referrer Policy: strict-origin-when-cross-origin
Response Headers:
access-control-allow-credentials: true
access-control-allow-origin: http://localhost:5173
access-control-expose-headers: accept, accept-encoding, authorization, content-type, dnt, origin, user-agent, x-csrftoken, x-requested-with, cache-control, pragma, Set-Cookie
content-length: 0
content-type: text/html; charset=utf-8
cross-origin-opener-policy: same-origin
date: Sun, 05 Feb 2023 01:21:28 GMT
location: /
referrer-policy: same-origin
server: nginx/1.21.6
set-cookie: csrftoken=zaBGdsPdVSEm1ZRvgNKuGxQcr2mRJvhh; expires=Sun, 04 Feb 2024
01:21:28 GMT; Max-Age=31449600; Path=/; SameSite=None; Secure
set-cookie: sessionid=z3gygehf6gcwuc5pdq2v8kzff61ipcss; expires=Sun, 19 Feb 2023 01:21:28 GMT; HttpOnly; Max-Age=1209600; Path=/; SameSite=None; Secure
vary: Origin, Cookie
x-content-type-options: nosniff
x-frame-options: DENY
Request Headers
:authority: api.whatify.io
:method: POST
:path: /auth/login
:scheme: https
accept: application/json, text/plain, */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
content-length: 44
content-type: application/json
origin: http://localhost:5173
referer: http://localhost:5173/
sec-ch-ua: "Not_A Brand";v="99", "Google Chrome";v="109", "Chromium";v="109"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
sec-fetch-dest: empty
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/109.0.0.0 Safari/537.36
In the console, I am trying to log the response headers when I get response:
console.log("WOW GOT", response.headers); // prints WOW GOT undefined
Why is there no headers being avilable to axios client when I can see them in browser?
I am using OKTA for user management and I am having an issue getting user information back. I have followed the documentation, I have CORS set correctly, enabled app permissions, etc.
If I test using postman I get the data back without a problem. It's only when react makes the api call that a 401 is returned. I have also narrowed down the headers causing the problem origin and referrer.
I am using okta/react I have searched for days and can't figure out what I'm missing. Does anyone have any suggestions or ideas?
ReactJS Code
useEffect(() => {
if (!authState.isAuthenticated) {
// When user isn't authenticated, forget any user info
setUserInfo(null);
} else {
oktaAuth
.getUser()
.then((info) => {
setUserInfo(info);
})
.catch((error) => {
// ToDo: log error
console.error(error);
});
}
}, [authState, oktaAuth]);
Request Headers: unAuthorized
GET /oauth2/default/v1/userinfo HTTP/2
Host: myHost.okta.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:88.0) Gecko/20100101 Firefox/88.0
Accept: application/json
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: http://localhost:1234/
Content-Type: application/json
X-Okta-User-Agent-Extended: #okta/okta-react/5.1.1 okta-auth-js/4.8.0
Authorization: Bearer sometoken
Origin: http://localhost:1234
Connection: keep-alive
Cookie: myCookie
Pragma: no-cache
Cache-Control: no-cache
TE: Trailers
Request Headers: Success
GET /oauth2/default/v1/userinfo HTTP/2
Host: myHost.okta.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:88.0) Gecko/20100101 Firefox/88.0
Accept: application/json
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Content-Type: application/json
X-Okta-User-Agent-Extended: #okta/okta-react/5.1.1 okta-auth-js/4.8.0
Authorization: Bearer sometoken
Connection: keep-alive
Cookie: myCookie
Pragma: no-cache
Cache-Control: no-cache
TE: Trailers
I succeeded in using this command to get the data in terminal.
curl -H "Authorization: JWT some-token-code" localhost:8001/api/users/
But in angular1.x app.factory.js.It returns GET http://localhost:8001/api/users/ 401 (Unauthorized)
function(token) {
console.log('JWT ' + token)
return $resource("/api/users/ ", {}, {
headers: {
'Authorization': 'JWT ' + token
}
})
}
This is the request headers
GET /api/users/ HTTP/1.1
Host: localhost:8001
Connection: keep-alive
Accept: application/json, text/plain, */*
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
Referer: http://localhost:8001/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: zh-CN,zh;q=0.8
Cookie: JESONG_USER_ID=01000000003981226574343581913557; _ga=GA1.1.630936919.1492924579; __utma=1.630936919.1492924579.1492924580.1492924580.1; __utmz=1.1492924580.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); Hm_lvt_a5aaaf14eb4ea4f77e46c672b6e33b31=1492924579; Hm_lvt_e010d1faf316a4dbfe8639481a2a3f90=1492930657; sessionid=ic2svmb4wyec67gz1opv5xbpl8fvc1vr; csrftoken=pQWQTS0xhk7hY5d1m3OABxbDPIFbkLSI3kDC0bcIwCDzm0wEmjsu6PbFsalfMgnz; token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwidXNlcl9pZCI6MSwiZW1haWwiOiJhZG1pbkBhLmNjIiwiZXhwIjoxNDk0NjY3NDI5fQ.Zs2fwu97QvyWqL1dzuf6VSfLLDOsbs-M6KeIy2cSpIg; username=admin; name=; identity=%E7%AE%A1%E7%90%86%E5%91%98
I do not know where the problem is.
How can i use $ resource to simulate HTTP requests in the command line (how to configure headers)?
Beginner, thank you for your teaching.
I have an AngularJS application. It sends out requests to another server for data and so there's an OPTIONS request goes out with every $HTTP call.
When I check with fiddler there are two calls. The Options that always returns a 200 OK and then the data call.
However when I check the $HTTP it seems that it's getting the first request ( the options request ) and not getting the second request the one with real data.
Can someone point me in the right direction with this?
Here's one example of the code that is not responding correctly:
.factory('isUsernameAvailable', function (appConstant, $q, $http) {
return function (username) {
var deferred = $q.defer();
// if (!angular.isDefined(username) || username == null || username == "" || username.length < 6 ) return deferred.resolve();
var url = appConstant.baseUrl + '/api/user/existsByName';
$http({
url: url,
method: "PUT",
data: {
userName: username
}
}).then(function (data) {
// Found the user, therefore not unique.
deferred.reject("User name is taken");
}, function (data) {
// User not found, therefore unique!
deferred.resolve();
});
return deferred.promise;
}
})
I expect it to be returning as success or failure depending on if it finds the username. But in this case it always responds as a fail/error.
Here are the requests being made:
OPTIONS http://localhost:3048/api/user/existsByName HTTP/1.1
Host: localhost:3048
Connection: keep-alive
Access-Control-Request-Method: PUT
Origin: http://localhost:2757
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36
Access-Control-Request-Headers: accept, authorization, content-type
Accept: */*
Referer: http://localhost:2757/Auth/register
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8
giving:
HTTP/1.1 200 OK
Server: Microsoft-IIS/8.0
Access-Control-Allow-Origin: http://localhost:2757
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Headers: content-type
X-SourceFiles: =?UTF-8?B?QzpcR1xhYmlsaXRlc3Qtc2VydmVyXFdlYlJvbGVcYXBpXHVzZXJcZXhpc3RzQnlOYW1l?=
X-Powered-By: ASP.NET
Date: Mon, 12 Jan 2015 17:52:12 GMT
Content-Length: 0
Then:
PUT http://localhost:3048/api/user/existsByName HTTP/1.1
Host: localhost:3048
Connection: keep-alive
Content-Length: 35
Accept: application/json, text/plain, */*
Origin: http://localhost:2757
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36
Authorization: null
Content-Type: application/json;charset=UTF-8
Referer: http://localhost:2757/Auth/register
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8
{"userName":"abdddcdefgg#live.com"}
giving:
HTTP/1.1 404 Not Found
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
Server: Microsoft-IIS/8.0
Access-Control-Allow-Origin: http://localhost:2757
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: X-Custom-Header
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?QzpcR1xhYmlsaXRlc3Qtc2VydmVyXFdlYlJvbGVcYXBpXHVzZXJcZXhpc3RzQnlOYW1l?=
X-Powered-By: ASP.NET
Date: Mon, 12 Jan 2015 17:52:12 GMT
Content-Length: 0
The problem is even if the second request returns a 200 when I debug the success and error functions it still goes to the error function all of the time.
You should use JSONP to do cross domain JSON calls. Look at the documentation here: https://docs.angularjs.org/api/ng/service/$http#jsonp. Also, your referring page and the response from the OPTIONS request must have the appropriate CORS headers set or else the browser will refuse to send the request here are the header settings that I use.
Access-Control-Allow-Headers:Content-Type, Authorization, Content-Length, X-Requested-With, Accept, x-csrf-token, origin
Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Origin:*
To call $http.jsonp with a PUT request, you would set up a configuration such as
var config = {
method: 'POST',
data: { test: 'test' }
};
and then pass that into the $http.jsonp call
$http.jsonp('http://example.com', config);
Here is more documentation https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS and http://en.wikipedia.org/wiki/JSONP
I have an issue processing responses from a server to a PUT request (same happens with POST). Starts with the following CORS pre-flight request.
Request:
OPTIONS /open/Patient/1 HTTP/1.1
Host: remoteserver.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: PUT
Origin: http://myclient
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36
Access-Control-Request-Headers: accept, content-type
Accept: */*
DNT: 1
Referer: http://myclient/patient/2JT
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Response:
HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 0
Date: Sat, 13 Sep 2014 16:58:28 GMT
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Content-Location, Location
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: accept, content-type
Access-Control-Request-Method: GET, POST, PUT, DELETE
Server: Name of remote server
Then the actual request:
PUT /open/Patient/1 HTTP/1.1
Host: remoteserver.com
Connection: keep-alive
Content-Length: 775
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json+fhir, application/json, text/plain, */*
Origin: http://myclient
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36
Content-Type: application/json+fhir
DNT: 1
Referer: http://myclient/patient/2JT
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
The response is not processed by AngularJS, instead it reports the following error:
net::ERR_METHOD_NOT_SUPPORTED
The body of the response is empty, and the status is "0". Thing is, if I set a break point in the Chrome debugger, after stepping through the code, I DO get a successful response. Here's what I get in the response:
HTTP/1.1 200 OK
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/json+fhir; charset=UTF-8
Content-Length: 154
Date: Sat, 13 Sep 2014 17:13:35 GMT
Pragma: no-cache
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Content-Location, Location
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Content-Location: http://remoteserver/open/Patient/1/_history/6
Server: Health Intersections FHIR Server
Here's the body of my code that sends the request using $http:
function updateResource(resourceUrl, resource) {
var deferred = $q.defer();
$http.put(resourceUrl, resource)
.success(function (data, status, headers, config) {
var results = {};
results.data = data;
results.headers = headers();
results.status = status;
results.config = config;
deferred.resolve(results);
})
.error(function (data, status) {
var error = { "status": status, "outcome": data };
deferred.reject(error);
});
return deferred.promise;
}
I've resolved this issue working with the developer of the server. Turns out there was an issue with the way the server handled connections. Resolved.