Grafana plugin - CORS issue with REST API - ajax

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?

Related

Using Rate Limiting doesn't add Header to response and gets CORS error in client

I'm trying to adapt this tutorial to my server using the Bucket4j Spring Boot Starter.
I'm using an application.properties file.
I can limit the api queries with no problem, but the client doesn't get a 429 error, on the client I get a CORS error.
I figure this is because I'm not adding a header to my server response when I'm limiting the api queries, but is there any way to add this throught the application.properties template?
On the official documentation there is a value called "bucket4j.filters[0].http-response-headers.<MY_CUSTOM_HEADER>=MY_CUSTOM_HEADER_VALUE" but I can't figure how to use it, did anybody use it?
Thanks
You can avoid CORS errors by adding the proper header:
bucket4j.filters[0].http-response-headers.Access-Control-Allow-Origin="https://<clientUri>:<clientPort>"
and if you are using some form of authentication you may want to also add this:
bucket4j.filters[0].http-response-headers.Access-Control-Allow-Credentials=true

Is there any tool to debug the rest calls made by GraphQL Playground?

I'm not able to figure out why the REST API call works just fine in Postman but not in the GraphQL Playground. If I could see the actual REST call being made by GraphQL, would be helpful to debug the issue.
Firecamp's GraphQL client lets you test the GraphQL as an API call or as a Query way.
Here is the dedicated GraphQL client
Here is REST like GraphQL client
Note: Make sure that you double-check the method and headers while using REST-like GraphQL client. IN most cases method would be post and header should contains Content-Type: application-json / application/graphql
The GraphQL playground allows to send GraphQL queries/mutations to your GraphQL server. You can see the requests that are send using the network tab of a browser dev tools.
For example, if a server is in running at the following address http://localhost:4000/graphql, sending a query/mutation, a XHR request will be sent to it. In the Request Payload of the Headers section there is the query/mutation itself.
In the Response section you can see the returned response.
You can start having a look at the returned response of your query/mutation. Perhaps there is something wrong in the related resolve function in GraphQL.

How to secure web api with Identity Server 3

I'm building an MVC web app that uses the openID Connect hybrid flow to authenticate with Identity Server 3. The MVC web app contains jQuery scripts to get async JSON data from een ApiController. That ApiController is part of the same MVC web app.
I don't want that everyone is able to access the data from the API, so I want to secure the API as well. I added an [authorize] attribute to the ApiController. When requesting the API with a JQuery ajax request I get the following error message:
XMLHttpRequest cannot load
https://localhost:44371/identity/connect/authorize?....etc.
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:13079' is therefore not allowed
access. The response had HTTP status code 405.
But, when I do a request to the API method directly in browser, I will be correct redirected to the Login page of Identity Server..
So, what's exactly the problem here? I read something about that requesting the /authorize endpoint is not allowed via 'back-channel', but I don't understand what's the difference between 'front-channel' and 'back-channel'. Is it possible that I mixed up the wrong OAuth flows? Is the Hybrid flow not the correct one maybe?
I also find out that the API is often a seperate app, but is it always neccessary / best-practice to build a seperate API app that for example requires a bearer token?
Please point me in the right direction about this.
The authorize method on your identity server does not allow ajax calls. Even specifying CORS headers is not going to help you in this particular case. Perhaps you could return a forbidden response instead of a redirect and manually redirect the client to the desired location via window.location
You need to allow your IdentityServer to be accessed from other domains, this is done by allowing "Cross Origin Resource Sharing" or CORS for short. In IdentityServer the simplest way to allow this is in your Client configuration for your Javascript Client, see this from the IdentityServer docs on CORS:
One approach to configuing CORS is to use the AllowedCorsOrigins collection on the client configuration. Simply add the origin of the client to the collection and the default configuration in IdentityServer will consult these values to allow cross-origin calls from the origins.
The error you're seeing is the browser telling you that when it asked IdentityServer if it allows requests from your Javscript client, it returned a response basically saying no, because the origin (http://localhost:13079) was not specified in the "Access-Control-Allow-Origin" response header. In fact that header wasn't in the response at all meaning CORS is not enabled.
If you follow the quickstart for adding a JavaScript client from the docs here all the necessary code is detailed there that you need for the Client config and to setup IdentityServer to allow CORS.

No 'Access-Control-Allow-Origin' header is present on the requested resource does not apply to postman

I have implemented a restful service. I have tested it using an ajax request within the application and also with postman client and both worked. But when i try to send an ajax request from a different application i get the below error in browser console.
http://localhost:8080/AusIncomeCalculator/AUSTax/post. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8089' is therefore not allowed access.
I don't understand how the postman client get a successful response while the other applications cannot.
RESTful service is hosted in JBOSS-eap 7.0 with rest easy
What happen is for security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts.Postman is a REST Client that runs as an application inside the Chrome browser. It is specifically designed for testing rest APIs, and therefore it doesn't restrict cross origin resource request.

Is AJAX a Rest api

Recently I have been working on Ajax. So according to me AJAX displays content in HTML using XML. But now does this mean it is a Rest api.
AJAX is a set of (typically) client-sided web development techniques, while REST is an architecture style for sending and handling HTTP requests.
So you can use AJAX to send RESTful requests.
A REST API is typically not implemented using AJAX, but can be accessed by an AJAX client.
There is plenty of information on both AJAX and REST (API) on the Internet. It should be easy to find.
Using REST we can do operations (PUT,POST,GET,HEAD) but by using AJAX we can only retrieve data from server side , AJAX can be a part of REST but REST can never be AJAX
http://rest.elkstein.org/2008/02/ajax-and-rest.html

Resources