"Cross-Origin Request Blocked" by sending request from TypeScript REST Client(s) in Angular

[dpedwards]

Hi dear BB dev team, we are trying to address the Budibase CRUD API in Angular. Unfortunately without success so far, although we use three different REST Client implementations.

TypeScript REST Client #1:

TypeScript REST Client #2:

TypeScript REST Client #3:

The error messages are the same in all three cases:

However, with the Postman tool and the same header information as the three previously listed REST TypeScript client implementations, a successful request is possible.
Postman:

So what are we doing wrong?

[melohagan]

Hi @dpedwards

If I understand this correctly, we would need to send back the mentioned header: Access-Control-Allow-Origin in the API response.

However, from this StackOverflow post, it does look like you can use a proxy through the angular-cli to get around this: https://stackoverflow.com/questions/50237881/angular-cors-request-blocked

Out of curiosity, does this issue persist across different web browsers?

[dpedwards]

"If I understand this correctly, we would need to send back the mentioned header: Access-Control-Allow-Origin in the API response."

Hi,
that would probably help.

Source

[dpedwards]

"However, from this StackOverflow post, it does look like you can use a proxy through the angular-cli to get around this: https://stackoverflow.com/questions/50237881/angular-cors-request-blocked"

Thanks for the link, we'll check it out.

"Out of curiosity, does this issue persist across different web browsers?"

Whether using custom REST clients, or viewing the Angular WebApp in Firefox, Chrome, or Edge, the cross-origin request error message is always shown. Only with Postman we can send requests to the BB CRUD API.

[dpedwards]

This thread can be closed.

Btw if you use an API (e.g. Python FastAPI) as wrapper and send the request from an Angular service over it to the BB CRUD API then the request from an Angular component also works locally. The proxy, however, did not work in Angular.

[Dharaneesh0745]

Hii @dpedwards

If you're using Typescript and facing a CORS error in production means, just write the ORIGIN as usual in your code. Before pushing your code to production, don't forget to run the build command, npm run build. Because in production, it always runs the Javascript code not the Typescript code. Once you have built your code using the build command, where the build Javascript files have been stored inside a dist or build folder based on your tsconfig.json configuration. On every time if you made changes in typescript code, don't forget to run the build command before pushing your code to production environment.

Sample code of mine,

const allowedOrigins = ["http://localhost:3000", "https://mudomain.com"]

app.use(
  cors({
    origin: (origin, callback) => {
      if (!origin || allowedOrigins.includes(origin)) {
        callback(null, true);
      } else {
        callback(new Error("Your client url is not allowed by CORS"))
      }
    },
    credentials: true
  })
)

[dpedwards]

@Dharaneesh0745, thanks for the final solution! By the way, we solved the CORS issue by creating an API wrapper using FastAPI. We handled the Angular requests through the API wrapper and routed them to the Budibase API.