Cors-Error with customized HttpClient

For my backend I’m using Swagger and .Net Core. Using Swagger (NSwagStudio) I generated a bridge class for Aurelia.

Now, trying to configure the http client and the bridge class I have the following situation:

First I tried without any Interceptor:


function configureContainer(container) {
  let http = new HttpClient();
  http.configure(config => {
    config
      .useStandardConfiguration()
      .withBaseUrl("http://mybase-url.com");

  });
  container.registerInstance(HttpClient, http); 
  container.registerInstance(Client, new Client("http://mybase-url.com", new HttpClient()));
  
}

This works quite fine.
Next I tried to add some Interceptors (e.g for Authorization-Header):

function configureContainer(container) {
  let http = new HttpClient();
  http.configure(config => {
    config
      .useStandardConfiguration()
      .withBaseUrl("http://mybase-url.com");

  });
  container.registerInstance(HttpClient, http); 
  container.registerInstance(Client, new Client("http://mybase-url.com", http));
  
}

And with the last example I’m getting CORS-Exceptions in Browser console and the request displayed in the network section of my browser states the http status 204.
Can anyone give me a hint why this is happening and how I can solve that?

Some additions:

With the following setup it works as well, but the interceptors are not executed:

function configureContainer(container) {
  let http = new HttpClient();
  http.configure(config => {
    config
      .useStandardConfiguration()
      .withBaseUrl(http://mybase-url.com)
      .withDefaults({
        credentials: 'same-origin',
        headers: {
          'Accept': 'application/json',
          'X-Requested-With': 'Fetch'
        }
      })
      .withInterceptor({
        request(request) {
          console.log("Test if the request interceptor gets called.");   //<------------------------------------
          console.log(`Requesting ${request.method} ${request.url}`);
          return request;
        },
        response(response) {
          console.log(`Received ${response.status} ${response.url}`);
          return response;
        }
      });

  });
  container.registerInstance(HttpClient, http);
  container.registerInstance(Client, new Client("http://mybaseurl.com"));
  
}

1 Like

I suggest that the issue might be on the server side.

Read through:

In particular, you might need to ensure your server is responding to the browser with the correct
Access-Control-XXXX in the preflight OPTIONS response, e.g. Access-Control-Allow-Headers

Hope that helps.

2 Likes

“BaseUrl(http://mybase-url.com)” <-- you forgot quotes here on this line maybe.

1 Like

Thank you for the response. This was the issue. I configured the server side wrong :see_no_evil:

1 Like