Ionic app not issuing POST request - django

I have an interesting problem with my Ionic application with a Django API server backend.
In previous versions of my app (0.0.1-.0.0.5) this hasn't come up, but starting now I'm not able to issue a POST request to get my authentication token.
Using Ionic locally ionic serve against my deployed server, when I attempt a login, my server registers an OPTIONS /token-auth/ and then POST /token-auth/. When I run the application on my device ionic run android and attempt to login the server only registers the OPTIONS request but does not register the POST, according to the server logs.
I've found out this is due to CORS, it issues an OPTIONS first to see what it is allowed to issue. For some reason the OPTIONS request comes back with absolutely nothing. In my other Django Rest Framework projects, the OPTIONS comes back with a proper response. I think this is related, but it's strange that it works from localhost to the deployed server with the OPTIONS request responding the same.
My login function is pretty basic:
$http({
method: 'POST',
url: config.apiUrl + 'token-auth/',
data: {
"username": usernameElement[0].value,
"password": passwordElement[0].value
}
}).then(function(data) {
console.log('success', data);
...
}, function(err) {
console.log('error', err);
...
});
Another thing I find interesting is that it runs the error function but instead of giving me back a normal error object in the err variable, I get back what appears to be the request object. I have never seen this before.
{
"data":null,
"status":0,
"config":{
"method":"POST","transformRequest":[null],
"transformResponse":[null],
"url":"http://example.com/api/token-auth/",
"data":{
"username":"myuser",
"password":"mypassword"
},
"headers":{
"Accept":"application/json, text/plain, */*",
"Content-Type":"application/json;charset=utf-8"}
},
"statusText":""
}
Runs fine local app to deployed server
Device app to deployed server doesn't register POST request, only OPTIONS
AJAX error return is the request object, not the error response object
I've been stuck on this for a couple days now and am looking for any ideas.

This was in fact a CORS problem. After debugging through django-cors-headers I found that it was not passing the CORS. I later found out that instead of serving on http://192.168.1.36:8100 for some reason ionic switched to serve on http://192.168.1.10:8100

Related

503 error when fetching an internal NextJS api with query parameters on AWS Amplify

I am trying to fetch data from a JSON file through NextJS internal API on the client side. But it is always throwing 503 error:
The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions.
We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
I tried to use the GET method with query params in the URL, but it didn't work, then I try the POST method with the query in the body(just to test out), but it also didn't work either.
Here is the code:
const response = await fetch(`/api/search?q=${query}`, {
method: "GET",
headers: {
'Content-Type': 'application/json',
},
})
const res = await response.json()
I have another component that sends some user inputs to save in my DB, and it is working perfectly. (I am really confused why one works but not other given both are equivalent request)
Also, the same app deployed on Vercel is working perfectly. So I think the issue is with Amplify.
Anyone had similar issues with the Next app on Amplify? please help.
most likely you are sending a GET request but you have something in the body. e.g. form-data. this is example in postman.

How to get cookies working with Nuxt Apollo and SSR correctly?

We've built a framework around Nuxt to get it to work with WordPress really well. We have been pulling our hair out trying to get post previewing working.
A common setup will be a WordPress install running on a domain like http://api.example.com and then to have Nuxt running on http://www.example.com. There is a WordPress plugin called WP-Graph-QL that creates a GraphQL endpoint like http://api.example.com/graphql, and we wrote a CORS plugin to set the correct CORS headers to work with whatever the frontend origin may be. This is that plugin if you are curious https://github.com/funkhaus/wp-graphql-cors
Our Nuxt Apollo setup is this:
export default function() {
return {
httpEndpoint: process.env.DEFAULT_ENDPOINT,
getAuth: () => process.env.BASIC_API_TOKEN || "",
httpLinkOptions: {
credentials: "include"
}
}
}
FYI sometimes the API will be hidden behind a Basic Auth UN/PW (like when on a staging site for example), that is what the getAuth function is doing.
This all seems to work client side, but it fails on SSR for some reason. It seems the cookies don't get sent in the SSR request, but they do in the client side request. Am I missing something super obvious here?
NOTE: I asked this question here 8 days, but am trying here for more attention

Fetch calls to RESTful API fail to authenticate on iOS after React Native 0.61 update

I'm working on a React Native app which needs to make API calls to a RESTful API built on the Django REST framework. To authenticate, our API has a login endpoint which sends back a sessionid cookie in the header, which we then send back in future request headers to receive user-specific information.
On Android this works as expected, however on iOS when sending exactly the same request after successfully logging in the server throws an error due to the user being unauthenticated.
The only noticeable difference in these tests is that on iOS the server returns an empty sessionid after making the second call (sent with a valid sessionid):
"headers": Object {
...
"Cookie": "sessionid=\"\"; ..."
}
We recently updated to Expo SDK 36, which includes an update to React Native 0.61. Prior to this update, both Android and iOS versions worked as expected, however I cannot be sure this was the direct cause as there was a ~2 week break over Christmas directly after updating before discovering the issue.
This snippet shows how we get the cookie when making a request (currently avoiding using extra libraries to simplify the process):
response = await fetch(requestConfig.url, requestConfig)
.then(result => {
let cookies = result.headers.get('set-cookie');
if (cookies != null) {
let sessionId = cookies.split(', ').find(element => element.match(/sessionid/))!.substring(10, 42);
sessionId && (this.sessionId = sessionId);
}
return result;
});
I have tried adding credentials: 'include', to the request, with no success.
The request itself looks like this on both platforms when making the authenticated request:
Object {
"body": "<JSON_Request>",
"headers": Object {
"Accept": "application/json",
"Content-type": "application/json",
"Cookie": "sessionid=<sessionID>",
},
"method": "POST",
"url": "<API_URL>",
}
I would very much appreciate some help if anybody has run into a similar issue with React Native 0.61, or can spot something I'm doing wrong!

Use sharepoint cross-domain javascript library to consume REST API from localhost

I try to consume the sharepoint rest API from an application deployed in localhost. The sharepoint site is hosted in Sharepoint 2013 online.
For that purpose I use the javascrpt cross domain library. I get an example here https://github.com/OfficeDev/SharePoint-Add-in-REST-OData-CrossDomain.
My application is a full static website and I don't have VS, so I tried to figure out the Add In authorization. I go to the _layouts/15/appinv.aspx page of my site to give the authorization of third party application:
app domain: localhost:8080
redirect url: http://localhost:8080 (pointless?)
permission request XML: <AppPrincipal><RemoteWebApplication ClientId="*" /></AppPrincipal>
When I go to my application, I'm authenticated with my account: the cookie is populated with the token in FedAuth and rtFa
I'm supposing that it should be enough to now consume the API:
var executor = new SP.RequestExecutor(addinweburl);
executor.executeAsync(
{
url:
addinweburl + "/_api/web/GetFolderByServerRelativeUrl('Shared%20Documents')"
,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function(e) {
alert('success');
},
error: function(e, c, d) {
alert('fail');
}
}
);
The error handler is called and the 1007 error code is sent. This is quite weird since this code is used when size is too important.
Any help is appreciated.
The library can't be used if the application is not deployed on the same sharepoint site domain...
I fallback to OAuth protocol in order to authenticate my client.
The following documentation was key to understand how to obtain an access token: https://github.com/wearearchitect/sharepoint-oauth-app-client/blob/master/docs/Credentials.md

Rails app making ajax calls to localhost when published on Heroku

I´ve developed an Rails app which works fine when running on localhost.
However, when pushing it to Heroku I run into problems with my ajax calls, which can look something like this:
$.ajax({
type: "GET",
url: "/getTemplatesForCategory/"+categoryId,
dataType: 'json',
success: function(data){
this.setState({templates: data, suppliers: []});
}.bind(this)
});
This is routed like this in my routes.rb:
get 'getTemplatesForCategory/:categoryId', to: 'templates#getTemplatesForCategory'
When these run on the Herou-version the console gives me this error:
Mixed Content: The page at 'https://myappname.herokuapp.com/templates/8' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://localhost:3000/getTemplatesForCategory/7'. This request has been blocked; the content must be served over HTTPS.
I´m using a Procfile which seems to work but I can't really figure out why the calls go to my localhost?
I discovered it was an completely different issue that caused this. Heroku did not pick up the changes to my javascript code so it was actually the old code make request to the localhost address.