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=eyJrIjoiZTNlMjcyNzQtMGMxZS00NTBlLTljMTMtZTM5YzRhNTc2NTljIiwidCI6ImYyN...
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…widCI6ImYyNzNhZTg0LTQxOT.... 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=eyJrIjoiYWRjNzA0OWMtMDE0MS00ZTE3LTkxZjgtYTJmNzEzNjUzZWY5IiwidCI6ImYyN...';
var $staticReportContainer = $('#reportstatic');
var staticReport;
fetch(staticReportUrl)
.then(function (response) {
debugger;
if (response.ok) {
return response.json()
.then(function (embedConfig) {
staticReport = powerbi.embed($staticReportContainer.get(0), embedConfig);
});
}
else {
return response.json()
.then(function (error) {
throw new Error(error);
});
}
});
var $fullscreen = $('#fullscreen');
$fullscreen.on('click', function (event) {
staticReport.fullscreen();
});
