Django REST framework API only working from the API project - ajax

I am developing a REST API for my application with django-rest-framework.
Everything works fine as long as I use either:
The browsable API
AJAX requests within a template in the same project where the API is being built
If I try to access the API from oustide the "master" project (the one I am building an API for), for instance from another Django project on the same machine, I am constantly getting an error.
Here is the trace from runserver for a successful API call:
[21/Nov/2014 12:11:01] "GET /api/test_session/ HTTP/1.1" 200 9208
The same endpoint but from outside the master project (it fails):
[21/Nov/2014 12:11:14] "GET /api/test_session/ HTTP/1.1" 200 58
I am using the ajax function of jQuery to send my API calls and I have set up the error callback. However the errorThrown that I receive is empty and the textStatus property only says "error".
How do I access my API from the oustide? I am using the default authentification backend (session based).

After some discussion it came to light that the error had to do with Cross Origin Resource Sharing policies.

A solution tailored for Django is to use django-cors-header, as recommended by the django REST framework documentation.

Related

How to deploy a js web app that fetches data from an api

How can I deploy a js web application that uses an API.
I have hosted it on netlify but it doesn't fetch the data.
Everything works fine on localhost.
Link: hiuhu-theatre.netlify.app
In firefox you can see the request the function getMovies made was blocked, the console shows the reason, it links to this URL.
Basically you're trying to use http protocol for that request when you're over https in your website.
To fix that simply change your "http://www.omdbapi.com/” to start with "https://" instead.
Also, if you can, do not add API key to client side code, if you do so anyone can steal it and use it themselves (and that might make you pay more for the service or reach the limit you have really quick), instead do a request to your back-end server so it fetches the data while hiding the API key.
It works in local because you're using http in local aswell.
I've overrided the getMovies function in my browser to use https and it worked nicely

API server block request from GuzzleHttp

I have 2 servers which are API server and Client server ....
Both server using Google Cloud server and I use Laravel framework to develop my system...
So, currently the problem is, it return 403 error when calling API (to API server) using GuzzleHttp (from Client Server).....
But after I change the user agent to curl/7.65.3, suddenly it is working fine...
But I want to know why??? Is there any other solution without changing the user-agent???
Thanks
What is your use method? If GET you can refer to:
GET Requests That Include a Body
If a viewer GET request includes a body, CloudFront returns an HTTP status code 403 (Forbidden) to the viewer.
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html

Grafana plugin - CORS issue with REST API

I'm currently developing grafana plugin using Angular-1 and ES6, retrieving data from REST API and representing them in grafana. The problem is that as far as grafana plugin is working within the browser, it sends ajax calls to our REST API and they are blocked:
No 'Access-Control-Allow-Origin' header is present on the requested resource. The response had HTTP status code 401.
We were required to solve this issue without adding that header on the REST API side. One simple solution was to use corsproxy.
But I'm curios to know whether there is some other way to use REST API within grafana. If I set up some datasource to my plugin, will it work as a kind of backend or my calls to REST API will still be AJAX calls?

Issues accessing socialauth via ajax

I am developing a server side web app using spring socialauth library by 3 pillars lab.
When accessing this web app using href in an anchor tag, I am able to invoke the 3rd party application (in my case, facebook) page.
But when i tried calling it using jquery ajax I got "Allow origin header error". On searching for this error, I found out that this error is due to the ajax calling page and the URL, it is trying to call, being on different domains. I have changed the headers in my webapp as: "allow origin to *". After this, my webapp does not throw this "allow origin header" error but now 3rd party app is throwing this error.
I have tried two types of Cross domain ajax method :
JSONP: with this i am able to hit even 3rd party url via ajax but it is throwing an error
"Resource interpreted as Script but transferred with MIME type text/html"
As per my understanding, it is throwing error because this method expects JSONP as response instead getting text/html in response.
CORS (Cross-Origin Resource Sharing):
In this also, facebook is throwing allow origin header.
I want to make ajax call to facebook using my webapp that uses socialauth library and it should display facebook page. Plus i dont want to redirect it.
I am stuck at this. Please help.

CrossDomain issue when making Ajax call to Web API

I have several projects in my solution: WebApi and WebPage project
Web API project returns me some data using the following Url:
http://localhost:63983/api/values
My main web project it uses another Port:
http://localhost:63421/#/
And now when I run my Web Project, I'm trying to make a simple Ajax call to my WebApi
And here I get a very strange error:
Firebug shows status: 200OK, but it marks it with a red color and I get no data.
I presume it has something to do with cross-domains maybe.
You guess is exactly right. You are not allowed to read data on a different domain. A domain is both the domain name and the port. This also applies when one is on HTTP (port 80), and the other is on HTTPS (port 443)
You can explicitly allow you WebProject to make AJAX calls to your WebApi by setting a header value in the content returned by your WebApi. So when you make an AJAX call to http//localhost:63983/api/values, it should include the HTTP header:
Access-Control-Allow-Origin: http://localhost:63421
More details can be found here: http://css.dzone.com/articles/ajax-requests-other-domains
You can enable CORS support in Web API using the Microsoft.AspNet.WebApi.Cors nuget package.
After installing the above package, having the following configuration should fix your issue.
config.EnableCors(new EnableCorsAttribute(origins: "*", headers: "*", methods: "*"));
More info here:
http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

Resources