CORS Issue with Angular app

[sebfischer83]

Hi,

I try to get mini profiler running, it seems that everything works except I cant get the results from the server to my client (other domain) because I get response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
How can I set the headers? Middleware and the normal CORS seems not to work here.

[NickCraver]

Can you help with the URLs that are being accessed from/to here? Domain1/Domain2 works for illustration purposes, but I'm not sure which resources you're trying to load. Is it the static content? The profiler JSON after the script tag, other?

[NickCraver]

If more info is available, please ping me here and I'll re-open, since this is situational it's impossible to help without more to go on.

[hunterconcepts]

I'm having this same issue, I think. I have my profiled api on a different domain. It seems that MiniProfiler was built under the assumption that the UI and profiled database would live on the same domain, which is not the case for me. I get the same CORS error when calling domain2 from domain1 since the include.js is making those calls on it's own. I have an Angular UI calling an Asp.Net Core API, which is profiled.

It would be great to have the ability to add headers to all http requests that MiniProfiler makes. Since I'm using Angular I have to hardcode the script locations that would be rendered automatically by ASP.Net on domain2. Maybe a "script initializer" would be possible to add?

<script type="text/javascript">
  (function() {
    var mp = document.createElement('script'); 
    mp.type = 'text/javascript';
    mp.data-version="4.0.138+gcc91adf599";
    mp.data-path= DOMAIN2 + RouteBasePath;
    mp.data-current-id="a5b47078-fb22-42b1-bac8-7c91054762eb";
    mp.data-ids="a5b47078-fb22-42b1-bac8-7c91054762eb";
    mp.data-position="Left";
    mp.data-authorized="true";
    mp.data-max-traces="15";
    mp.data-toggle-shortcut="Alt+P";
    mp.data-trivial-milliseconds="2.0";
    mp.data-ignored-duplicate-execute-types="Open,OpenAsync,Close,CloseAsync";
    mp.data-header-function="SOMEFUNCTIONTOADDHEADERS";
    mp.src = DOMAIN2 + RouteBasePath + '/includes.min.js';
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(mp, s);
  })();
</script>

I love MiniProfiler, such a great job!

[jimmyp]

I'm also having this issue.

I have an angular app running on http://localhost:4200 and loading the script from my .net core api running on http://localhost:15000

I've added the script tag to my angular app like this:

<script
      async="async"
      id="mini-profiler"
      src="http://localhost:15000/profiler/includes.min.js?v=4.2.1+b27bea37e9"
      data-version="4.2.1+b27bea37e9"
      data-path="http://localhost:15000/profiler/"
      data-current-id="c2a71c10-046b-49b7-9e3d-e04f779fe5e9"
      data-ids="c2a71c10-046b-49b7-9e3d-e04f779fe5e9"
      data-position="Left"
      data-scheme="Light"
      data-authorized="true"
      data-max-traces="15"
      data-toggle-shortcut="Alt+P"
      data-trivial-milliseconds="2.0"
      data-ignored-duplicate-execute-types="Open,OpenAsync,Close,CloseAsync"
    ></script>

But I get the following error in chrome dev tools console:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:15000/profiler/results. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:15000/profiler/results. (Reason: CORS request did not succeed).