Access-Control-Allow-Origin Issue in Angular 4

Question

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Possible duplicate of [No 'Access-Control-Allow-Origin' header in Angular 2 app](https://stackoverflow.com/questions/36002493/no-access-control-allow-origin-header-in-angular-2-app) — Haseoh, Aug 01 '17 at 10:25

score 1 · Answer 1 · answered Aug 01 '17 at 10:28

This is not an issue of Angular 4. Pre flight requests are sent whenever an application residing on server A attempts to do an API call on Server B.

If you are using webpack-dev-server (for example on localhost 4000), and your backend server (jBoss, Tomcat, etc) on localhost:8080, the browser performs a preflight request to check for the Access-Control headers.

By default, the server does not include these headers. They need to be added either by your server, or by a proxy server such as Nginx or Apache that is sitting between the front end server (/domain) and the backend server.

score 1 · Answer 2 · edited Aug 01 '17 at 11:43

I have a solution for this. You need to add a proxy.conf.json file in your root directory, with your server path like this.

{
    "/FOLDER_PATH from root/*": {
        "target": "YOUR_DOMAIN with folder path",
        "secure": false,
        "logLevel": "debug",
        "pathRewrite": {
            "^/FOLDER_PATH from root": "FOLDER_PATH from root"
        }
    }
}

Then you need to update your package.json file like this

"start": "ng serve", to `"start": "ng serve --proxy-config proxy.conf.json",

Also don't forget to use $ npm start instead of ng serve

Access-Control-Allow-Origin Issue in Angular 4

2 Answers2