Proxy to multiple paths angular

I'm trying to proxy to a certain API endpoint that returns an html page but I get the error Access to font at 'https://data.domain.com/v3/assets/fonts/glyphicons-halflings-regular.woff2' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://data.domain.com/v3/assets/fonts/glyphicons-halflings-regular.woff2 net::ERR_FAILED

Inside my angular app, I have three different targets that I am proxying to. The first two proxies work fine but the other is a bit weird. My proxy.conf.json file looks sth like this...

{
  "/API": {}, // First proxy works fine
  "/info": {}, // Second proxy fine too
  "/data": {
    "target": "https://data.domain.com/v3/uk",
    "secure": false,
    "pathRewrite": {
      "^/data": ""
    },
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

So inside my data service, I define a variable data that contains the path '/data' and I pass that as the path in my POST request like so...

private data = '/data';

public fetchData(data: Data) {
  return this.http.post(this.data, data, {responseType: 'text');
}

Upon making that post request, I'm expecting the returned value to be some html code that I'd like to bind to my template. Herein lies the problem. You see, the returned HTML looks something like this...

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>My Page</title>
        <!-- Bootstrap -->
        <link href='https://fonts.googleapis.com/css?family=Ubuntu:300' rel='stylesheet' type='text/css'>
        <link href="https://data.domain.com/v3/assets/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://data.domain.com/v3/assets/css/loading-bar.min.css" rel="stylesheet">
        <link href="https://data.domain/v3/assets/css/custom.css" rel="stylesheet">
    </head>
    <body
        <p class="title">Page Title</p>
    </body>
</html>

See that bootstrap import? I think that's what's causing the problem because inside the bootstrap.min.css code, references to the glyphicons-halflings-regular font are made like so...

url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'),url(../fonts/glyphicons-halflings-regular.woff) format('woff'),url(../fonts/glyphicons-halflings-regular.ttf) format('truetype')

Hence for each of those font formats, I get the exact same error repeated. How can I solve this?

Recommended topics

Hot tags