load external JSON file using URL

Question

I have a JSON file on the server. I want to load it in my angular-typescript. I tried the following.

ngOnInit () {
  this.httpService
    .get("http://x.x.x.x/config_files/test/config.json")
    .subscribe(data => console.log(data));
}

I'm getting the following error when I refresh a page

Access to XMLHttpRequest at 'http://x.x.x.x/config_files/test/config.json' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Since there is no server-side API the header Access-Control-Allow-Origin cannot be added. How to fix the issue?

Possible duplicate of [Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present) — ashok k, May 20 '19 at 11:32
You have the server locally ? I mean is it your laptop or some external server — Abdulrahman Falyoun, May 20 '19 at 12:01
your server needs to be configured to allow cross origin requests. Let's see the code for your web server — Aluan Haddad, May 20 '19 at 13:08
This has nothing to do with the json file. All the request will be blocket by the CORS policy. Your problem is on the server. You can fix this only by adding the CORS headers on the back-end. Which type of server are you using? — NicuVlad, May 20 '19 at 13:13

score 0 · Answer 1 · answered Jun 03 '19 at 12:07

There are certain plugins that you can use to resolve the CORS issue one is Moesif Origin & CORS Changer, The link provided is for a chrome extension.

After installing the plugin just toggle the ON switch and refresh your app. This plugin allows you to send cross-domain requests. You can also override Request Origin and CORS headers.

score 0 · Answer 2 · answered Oct 09 '19 at 20:19

The CORS is mostly a backend issue. You can solve it on Node.js with a code such as:

var express = require('express');
var app = express();
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

But if you want to solve it in frontend, you may use this kind of code in Angular. Put this code into a proxy.conf.json (but beware, a trailing slash is enough to make it not to work):

{
  "/config_files/*": {            <-- you may change this for config_files/test/
      "target": "http://xxxxxx:<port>",
      "secure": false,
      "logLevel": "debug",
      "changeOrigin": true
  }
}

The following in package.json:

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    ...
}

And add the proxy config in angular.json:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "event:build",
    "proxyConfig": "proxy.conf.json"  <-- this line
  },...

Start it with npm start.

It should work in your case, but in other cases (not in prod of course), I find it easier to use temporarily an extension for Chrome or Firefox. Also I found that because of some restriction it may not work in Chromium and Chrome Canary.

load external JSON file using URL

2 Answers2