develop

Integrations with external apis

CORS

It is ideal to read the link to which the title redirects but in summary CORS is a standard for Cross-Origin Resource Exchange and is responsible for creating mechanisms to secure the apis from attacks from non-secure sources and at the same time enable the response resources to the js of the front here another link with a post that I wrote about it.

Preflight Request

They are requests prior to the request made in js with the Options method performed automatically by the browser when it detects a series of patterns in the request to verify the request.

When we make a request that includes a preflight request, this options method can also guide us to understand what will happen or the possible integration problems by reading the response headers of this request as they are:

Access-Control-Allow-Credentials

This header returns a boolean that informs if credentials can be sent in the actual request.

Access-Control-Allow-Methods

They are the methods accepted by the requested endpoint.

Access-Control-Allow-Headers

They are the headers accepted by the requested endpoint.

external api

Now let's talk about important headers in the service request, when we make a request we not only send the data that we inject in the axios or jquery request but also headers that the browser adds to these requests.

Origin

Indicates the origin from where the query is being made and only contemplates the URI, that is, it does not include the path from which the call is made.

Access-Control-Request-Method and Access-Control-Request-Headers

When a request is made that requires a preflight request, these headers are added to the OPTIONS method automatically requested to validate that the headers can go in the method to be called Access-Control-Request-Method announces the method to be called Access-Control-Request-Headers announces the additional headers that will go in the final request

Now let's talk about important headers in the service response, when we receive the response from a service the browser uses headers a lot to give the front permissions what to use and what not, we have several important headers in this section, most of them are here but let's focus in the important ones for an integration.

Access-Control-Allow-Origin

This header defines from where the api can be consulted, that is, when we send the request automatically it sets an origin in the headers and if this origin is accepted by the api, it must in the response return the same origin or, failing that, a wildcard * , the origin is unique in the response, that is, it is not accepted to receive a list of origins, the api must take care of returning the same one from which it was consulted or a * to inform that the api is public and can be consulted from any origin.

Access-Control-Expose-Headers

This header allows us to give access to custom headers, that is, the front js could not access non-standard headers that are not defined in a list in this response header, like the previous one, it could have a * to say that they can be access all but in this case you can also define a list of headers separated by commas to say which ones can be specifically accessed by the front.

Access-Control-Max-Age

This header indicates when I should request the verification or preflight request of this api again and defines this delta in seconds.

By

Giorgio Saud

Giorgio Saud