fetching npm registry with angular httpClient causing CORS

Question

I am trying to use angular httpClient to access npm registry to get specific package dependencies

When I am doing the request I am getting CORS error

Access to XMLHttpRequest at 'https://registry.npmjs.org/async/2.0.1' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. http://registry.npmjs.org/async/2.0.1

this.httpClient.get(requestUrl).pipe(catchError(this.handleError)).subscribe((result: any) => {
    console.log(result);
});`

Do I need to add headers to request in order of this to work?

Possible duplicate of [XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header](https://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-xxx-no-access-control-allow-origin-header) — Quentin, Oct 28 '19 at 21:17

score 3 · Accepted Answer · answered Apr 16 '20 at 13:08

3

You can use unpkg (https://unpkg.com/) instead of https://npmjs.com/

Unpkg is a CDN and allows to use fetch and XMLHttpRequest

answered Apr 16 '20 at 13:08

vadzim

481
4
7

unpkg doesn't contain registry data as far as I know, so this is not related to the question. – Mu-Tsun Tsai Feb 06 '22 at 13:36

score -1 · Answer 2 · answered Oct 28 '19 at 21:13

If developing locally, you can't change much in your code because npm registry will block anything called from localhost. To make this work, you could use CORS proxies, for instance https://cors-anywhere.herokuapp.com

So your request url would change to https://cors-anywhere.herokuapp.com/https://registry.npmjs.org/async/2.0.1

and you could change your code to something similar:

if(!environment.production) {
    const corsProxy = 'https://cors-anywhere.herokuapp.com/'
    requestUrl = `${corsProxy}${requestUrl}` 
}

this.httpClient.get(requestUrl).pipe(catchError(this.handleError)).subscribe((result: any) => {
    console.log(result);
});`

this issue here is that npm does not support CORS at all. the `if (!environment.production)` is a little misleading here, because this code will not in production either. — TBieniek, Feb 20 '20 at 07:14

fetching npm registry with angular httpClient causing CORS

2 Answers2