Error while accessing powerbi published url in angular Js/ aspx files

onbabu — Mon, 19 Sep 2016 11:15:10 GMT

Hi,

I have developed Power BI Charts by using Power BI Desktop, Sql Server db and Published it in to app.powerbi.com with my credentials, and then i get following URL by clicking on Publish to website.

https://app.powerbi.com/view?r=eyJrIjoiZTNlMjcyNzQtMGMxZS00NTBlLTljMTMtZTM5YzRhNTc2NTljIiwidCI6ImYyNzNhZTg0LTQxOTctNDJiNi1iNTgzLTYxNWJlNGZiNmZkYSIsImMiOjEwfQ%3D%3D

The above url is working fine if i just copy paste that url in web browsers. but where as i used the same url with Angular Js Embeded API it was showing following error

Fetch API cannot load https://app.powerbi.com/view?r=eyJrIjoiYWRjNzA0OWMtMDE0MS00ZTE3LTkxZjgtYTJm…widCI6ImYyNzNhZTg0LTQxOTctNDJiNi1iNTgzLTYxNWJlNGZiNmZkYSIsImMiOjEwfQ%3D%3D. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:22668' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Can any one help me to resolve this error.

I am givning html and java script code which i used below.

html:

<html>
<head>
<title>Power BI - Sample</title>
<base path="/" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="styles/app.css" />
</head>
<body>
<div class="container">
<div id="reportstatic" class="powerbi-container"></div>
</div>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.3.0/es6-promise.js"></script>
<script src="../bower_components/fetch/fetch.js"></script>-->
<script src="../bower_components/powerbi-client/dist/powerbi.js"></script>
<script src="app/index.js"></script>
</body>
</html>

java script :

$(function () {
var models = window['powerbi-client'].models;
var staticReportUrl = 'https://app.powerbi.com/view?r=eyJrIjoiYWRjNzA0OWMtMDE0MS00ZTE3LTkxZjgtYTJmNzEzNjUzZWY5IiwidCI6ImYyNzNhZTg0LTQxOTctNDJiNi1iNTgzLTYxNWJlNGZiNmZkYSIsImMiOjEwfQ%3D%3D';

var $fullscreen = $('#fullscreen');

$fullscreen.on('click', function (event) {
staticReport.fullscreen();
});

Re: Error while accessing powerbi published url in angular Js/ aspx files

KumarDarmesh — Tue, 20 Sep 2016 03:25:18 GMT

Check if this link helps

http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource

Re: Error while accessing powerbi published url in angular Js/ aspx files

onbabu — Tue, 20 Sep 2016 09:49:17 GMT

Hi Mr.KumarDarmesh,

Thansk for your reply, but i didn't get solution for my problem with your link. Can any other way to resolve this problem.

Thanks in advance

Narendra

Re: Error while accessing powerbi published url in angular Js/ aspx files

metricsman — Sat, 24 Sep 2016 04:34:33 GMT

That looks to be a CORS issue which the stackoverflow article covers various options.

Which did you try ?

topic Re: Error while accessing powerbi published url in angular Js/ aspx files in Developer

Error while accessing powerbi published url in angular Js/ aspx files

Re: Error while accessing powerbi published url in angular Js/ aspx files

Re: Error while accessing powerbi published url in angular Js/ aspx files

Re: Error while accessing powerbi published url in angular Js/ aspx files