How Angular calls CORS enabled Netlify Function

Reading Time: 3 minutes

 176 total views,  1 views today


In previous post (article), I created a Netlify function to return menu data in JSON format. In this post, I will show how to deploy the Netlify function to production environment and call the endpoint in the Angular Spanish Menu app from Github Page

show me, don't tell me

Enable CORS in Netlify function

Github page and Netlify have different domain names, we must enable CORS in our Netlify function to ensure that it accepts HTTP request from any domain.

First, we modify netlify.toml to add HTTP header, Access-Control-Allow-Origin to specify allowed origins.

  # Define which paths this specific [[headers]] block will cover.
  for = "/*"
    Access-Control-Allow-Origin = "*"

Deploy Netlify function to production

Second, we will deploy the function to production site such that our Angular app can access it in Github page.

  1. Login Netlify site
  2. Choose the site, navigate to Deploys menu and click Trigger deploy button to deploy the function manually
deploy netlify function to production

Update Angular environment variable

Third, we will update menuUrl variable in to point to the function at

export const environment = {
  production: true,
  menuUrl: 'https://<site name>',

Deploy Angular to Github page

Next, we deploy our Angular app to Github page to verify integration with Netlify function actually works.

  • Install angular-cli-ghpages.
ng add angular-cli-ghpages
  • Add ng deploy configuration in angular.json
"deploy": {
   "builder": "angular-cli-ghpages:deploy",
   "options": {
       "baseHref": "",
       "name": "<user name>",
       "email": "<user email>",
       "message": "<github commit message>",
       "repo": "",
       "noSilent": true
  • Simplify deployment of our app by auhoring a new npm script
"github-page-deploy": "ng deploy"

npm run github-page-deploy deploys our app to Github page on our behalf

Finally, we can browse our application to verify integration with the production Netlify function.

amost there

Verify integration


browser angular app in github page

Open Network tab to verify that our application calls menu function successfully. It is made possible because the value of access-control-allow-origin response header is “*”.

result of http response

The result of the HTTP response is a valid JSON object containing our food menu.


We made few configuration changes and our Angular application can load data from the Netlify function.

This is the end of the post and I hope you find this article useful and consider to use serverless function to prototype Angular application.

Good bye!

we made it to the end of the blog post


  1. Repo:
  2. Github Page:
  3. Access-Control-Allow-Origin Policy –