Working with CORS request header
Naser Afsar

Working with CORS request header

JavaScript web programming is growing fast and it is getting better over the years. However the Cross-Origin Resource Sharing (CORS) policy has not changed very much. CORS policy is used by all major web browsers and servers. I am only going to show a tiny part of the CORS with Angular for disabling the cache in browsers. I have this Angular service that pulls JSON data from Apache server and I wanted to get the fresh data for every request rather than web browser's cache. Before I show the client's codes, I will add some logic configuration into my web server that accepts my requests coming from a different domain (local IP address). The CORS policy requires a little configuration on my server and in my client codes. There are other ways to bypass server's CORS policy like using a proxy in webpack's server then you are hijacking the URL. The proxy configuration technique is complex since most servers are configured with a third party security plugins.

Here are the errors that I got for my Angular/CORS testing:

I modified the .htaccess configuration file on my server to accept the CORS header policy. Here is CORS policy for my Angular client side to request to get the JSON data from my server:

This is a tiny CORS test and I have full access to server for getting the JSON data. I have been interested in using CORS policy with Angular API to access WebGL images/textures, videos and other data. Also, The only way that I have been able to determine or research as what went wrong is to observe the browser's console log for details. The errors do not provide a specific solution for CORS issues but they provide what is missing in my codes or server side configuration. There are many available online guides on CORS and I found out it is good to look at them and learn about their techniques. The Mozilla CORS web site is excellent. It does not tell you what to fix with CORS issues but it provides the details on CORS and it's architecture.

CORS - Mozilla guide

HttpClient - Angular

Cheers. :)


To view or add a comment, sign in

More articles by 🅽🅰🆂🅴🆁 ‘

  • A quick look at Widgets

    If you own an iPhone then installing iOS 14 opens the door for Widgets. This version now includes adding Widgets into…

  • Angular framework for your next enterprise project

    Some benefits of Angular framework for your next enterprise project 1- Using RxJS library, the reactive programming…

  • Little on Flux and Redux

    Five (5) minutes reading. I have been using JavaScript (JS) for many years in building applications.

  • Reactive Extensions for JavaScript

    I am sure you have heard of Reactive Extensions for JavaScript ( RxJS ) if you are familiar with Angular, EmberJS…

  • Angular 7 CLI

    The Angular framework is constantly evolving and improving fantastically. It has to do with the quick changes in…

    2 Comments
  • Generics basics

    Click here to play with codes Click her to play with interface codes If you use one of the programming languages like…

  • Parent listens for child event

    Angular @Output provides a way for a child component to emit events to its parent component with the help of…

  • Components interactions

    Angular components are the basic block codes for client web applications. They are the User Interface (UI) elements…

  • Angular and threeJS

    Note: The raw dragon COLLADA file is more than 8 MB and Github may not have the bandwidth to show it. Please try…

  • VR view with threejs JavaScript API

    Demo: VR view of Waneka lake Codes:github JavaScript is a powerful tool for developing and implementing web apps…

Others also viewed

Explore content categories