Angular Integration with Pagseguro

Asked

Viewed 811 times

3

I am trying to implement an integration of Angular 8 with the billet generating api of pay-off. Making the request by POSTMAN, I can generate without problems, by angular I am blocked by CORS.

follows the Decree

boletoGenerate(body: Boleto): Observable<any>{
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Credentials': 'true',
    'Access-Control-Allow-Headers': 'Content-Type',
    'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE'
  })
}
 return this.http.post<Boleto>(this.url, body, httpOptions).pipe();
}

I tried with and without setting the header, and the result was the same. Has anyone had this problem or knows how to fix ?

angular

  • You can open Chrome with the --disable-web-security parameter. You can create a localhost certificate, it probably only allows req https. See the Sponse headers of the request.

  • I contacted Pagseguro, they informed me that I need to implement this functionality in the backend. So in order for me to be able to implement this functionality that I want in the frontend, I’m going to need to do a request flow more or less like this: Frontend creates request -> Backend forwardthis request -> Pagseguro returns boleto -> Backend returns boleto -> Frontend captures the generated boleto

1 answer

0

Define or not the items you quoted within your headers It will make no difference when consuming the API. The API is who should send these items in the response header so the browser knows what the rules are for accessing it. When you use Postman this problem does not occur because these are rules validated only in the browser.

To ignore this validation during your development you can:

  • Run Chrome with the parameter --disable-web-security Example: run this command chrome.exe --disable-web-security

  • Use Safari: Go to the Developer tab and select the option Disable Cross-Origin Restrictions

Tip: Analyze the header returned by the API to see which parameter is blocking your browser usage within your environment.

  • I get it. But then, always in dev, I’ll need to run Chrome this way ? In my previous ( or code ) I can’t solve ?

  • @Matheusbarbosa doesn’t really! If the Header the API is sending contains the necessary rules for you to access from your environment, there will be no problem. Suppose the API sends Access-Control-Allow-Origin: http://teste.com, in this case you will need to open the browser the way I said to not have problems with CORS. If it is Access-Control-Allow-Origin: * you can consume normally. See which items are in the API response header. If you look there will know whether or not you will have problems in production but developing can proceed as in the above answer.

  • @Matheusbarbosa have a look at this link: https://developer.mozilla.org/en-US/docs/Web/HTTP/Controle_Acesso_CORS

  • It didn’t work, I tried to start Chrome with this flag and I kept being blocked, but I tried to install an extension that theoretically unlocks Cors, but it didn’t work =/

  • @Could Matheusbarbosa post the error message? if possible, also please inform here the return header of the API through Postman so we can take a look at the headers

  • I was able to contact pagseguro, they informed me that there is no way to make this request through the front end. It is necessary to implement the request by the backend, I will post the correct response.

Show 1 more comment

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.