How to configure angular-cli proxy to solve CORS errors

Question

I can't figure out why my angular-cli proxy configuration is wrong. I'm still getting the CORS error from chrome.

This is the proxy configuration:

 "/sites": {
        "target": "http://dati.venezia.it",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true,
        "pathRewrite": {
            "^/sites": ""
        }
    }

This is the request made by the component

ngOnInit() {
    this.getData()
  }

  getBaseUrl() {
    return 'http://dati.venezia.it/';
  }

  getData(){
    const headers = new HttpHeaders({ 'Content-Type': 'text/plain' });
    this.http.get(this.getBaseUrl() + 'sites/default/files/dataset/opendata/temparia.json', { responseType: 'text', headers }).subscribe(
      data => {
        console.log('getData OK -> ', data);

      },
      error => { 
        console.log('getData ERROR -> ', error) 
      }
    )
  }

Note

The proxy is working, I can see the rules applied in console

[HPM] Proxy rewrite rule created: "^/sites" ~> ""
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]

Already tried without 'pathRewrite'.

I'm still getting this CORS error, and I don't understand why, can someone help?

Access to XMLHttpRequest at 'http://dati.venezia.it/sites/default/files/dataset/opendata/temparia.json' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Ajay Reddy · Accepted Answer · 2019-08-21 13:26:49Z

1

In your server, which is serving http://dati.venezia.it, you need to set the headers:

Access-Control-Allow-Origin: '*'

If you don't have access to the server then disable chrome web security:

in Mac OSX, use the following command to run chrome:

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

On Windows 10, Command will be:

C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp

edited Aug 21, 2019 at 13:26

answered Aug 21, 2019 at 13:08

Ajay Reddy

1,4931 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marco M Over a year ago

That is an external resource, i can't set any headers on that.

Ajay Reddy Over a year ago

then the only other way is to disable chrome security....I have updated the answer with how this needs to be done

Collectives™ on Stack Overflow

How to configure angular-cli proxy to solve CORS errors

Note

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Note

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related