Angular 5 Access-Control-Allow-Origin error with localhost

Question

I'm leaning Angular, trying to use HTTP get to a file on my PC. I want to simulate the server scenario so tried serving the file with the following, (live-server, browser-sync & xampp) one at a time, but with every try I get the error

Failed to load http://localhost/ng-data/products.json: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:4200/' that is not equal to the supplied origin. Origin 'http://localhost:4200' is therefore not allowed access

When I paste the url (http://localhost/ng-data/products.json) in my browser I can get the file.

Why the down vote?? if my file is inside htdocs in xampp files, why wouldi add port 4200? — shireef khatab, Feb 21 '18 at 12:10
Angular is serving from 4200, but the file is somewhere else not in angular projects — shireef khatab, Feb 21 '18 at 12:11
i presume youre using `ng serve` to run the webpage? how are you serving the data? — mast3rd3mon, Feb 21 '18 at 12:11
in which case, it sounds like you need to enable cors on the server/xampp — mast3rd3mon, Feb 21 '18 at 12:18

shireef khatab · Answer 1 · 2018-03-03T22:50:51.167

I found other 2 ways to work around this situation,

solution 1:

To change the products.json file to products.php, then add this at the top:

<?php  
  'header(Access-Control-Allow-Origin: *)';
  'header(Content-Type: application/json)'
?>

finally, change the url which you are connecting to, from products.json to products.php

solution 2

using proxy configuration see: Angular documentatiom

follow these steps:

1- change the url inside the service to '/api/products' instead of 'http://localhost/products'

2- create proxy.config.json file in the root directory of your angular project add this code inside it:

    {
  "/api/*": {
    "target": "http://localhost",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

3- create folder api on the server and add the products.json inside it.

Note: in my case i'm using localhost with no port specified as i'm using xampp. but if ur using node for example you will specify the port like: localhost:3000 in proxy.config.json

score -3 · Accepted Answer · answered Feb 21 '18 at 12:16

-3

Because you're testing, I suggest you use the Chrome extension. Please search this in the Chrome extension list as shown below and then enable it. Probably your problem will be solved.

answered Feb 21 '18 at 12:16

BehrouzMoslem

9,053
3
27
34

I'll try that,, by the way i didnt downvote your answer – shireef khatab Feb 21 '18 at 12:17
how would this affect an angular webpage? – mast3rd3mon Feb 21 '18 at 12:18

Angular 5 Access-Control-Allow-Origin error with localhost

2 Answers2

solution 1:

solution 2