I'm learning ReactJS and trying to run the code at https://raw.githubusercontent.com/kirupa/kirupa/master/reactjs/helloworld_batman.htm (this is from the instructions at https://www.kirupa.com/react/building_your_first_react_app.htm).
Using Chrome, "Batman" is never displayed and Chrome developer tools logs the following error:
Access to script at
'https://unpkg.com/react-dom#16.7.0/umd/react-dom.development.js'
(redirected from
'https://unpkg.com/react-dom#16/umd/react-dom.development.js') from
origin 'null' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
Sure enough, when requesting react-dom.development.js directly the Network tab reveals that the header is missing.
Other items of note:
The header IS present when requesting react.development.js directly
The instructions at https://reactjs.org/docs/cdn-links.html show retrieving the files from unpkg in this way
The problem does not occur in IE 11
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React! React! React!</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<style>
#container {
padding: 50px;
background-color: #EEE;
}
#container h1 {
font-size: 144px;
font-family: sans-serif;
color: #0080a8;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var destination = document.querySelector("#container");
ReactDOM.render(React.createElement(
"h1",
null,
"Batman"
), destination);
</script>
</body>
</html>
It turns out if I take out "crossorigin" then it works in Chrome!
There's a discussion of this at With <script crossorigin='anonymous'>, why is a script "blocked by CORS policy"?
Related
this is the first time i write on Stack Overflow.
I'm trying to use React locally using babel but when i try to execute it in the browser i got the cross-origin request blocked error.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test React</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" ></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js" ></script>
<script type ="text/babel" src="app.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
What i need to do ?
You should use Create react app to create a React Application
npx create-react-app my-app
cd my-app
npm start
It will fix all this errors
I am trying to create my first sample using React tutorial. This is the code i have written on a text edit file and saved it as Day.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React! React! React!</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<script type="text/babel">
ReactDOM.render(
<h1>Alok upadhyay</h1>,
document.body
);
</script>
</body>
</html>
When i am running this file by double clicking on day1.html, it just shows the same html loaded on web. Attached output:
It should show Alok upadhyay. I have tried it on chrome, safari and firefox but it is not working at all.
Any advice!
Thanks
I tried adding angular-carousel in my application and I am getting this error
Failed to instantiate module ngMaterial due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=n...)
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:6:412
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:40:222
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:319)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:488
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:319)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:488
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:7:355
I got this error only after adding ngMaterial in my application with carousel. I am using latest stable version 1.5.8 of angularjs. This is my code I tried until now,
<!DOCTYPE html>
<html ng-app="DemoApp">
<head>
<meta charset="UTF-8">
<title>angular-carousel demo</title>
<meta name="viewport" content="width=620, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/angular-material.min.css">
<link href='css/angular-carousel.min.css' rel='stylesheet' type='text/css'>
</head>
<body ng-controller="DemoCtrl">
<style type="text/css">
.selected
{
background-color: red;
}
.demo
{
height: 500px;
width: 100%;
}
.carousel5
{
height: 500px !important;
width: 100% !important;
}
</style>
<div class="demo" >
<ul rn-carousel rn-carousel-index="carouselIndex6" rn-carousel-deep-watch rn-carousel-buffered class="carousel5">
<li><div style="height:500px;width:100%;background-color:blue;"></div></li>
<li><div style="height:500px;width:100%;background-color:cyan;"></div></li>
<li><div style="height:500px;width:100%;background-color:grey;"></div></li>
<li><div style="height:500px;width:100%;background-color:yellow;"></div></li>
</ul>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-touch.js"></script>
<script src="js/angular-carousel.min.js"></script>
<script src="js/angular-material.min.js"></script>
<script>
angular.module('DemoApp', [
'ngMaterial','angular-carousel'
]).controller('DemoCtrl', function($scope) {});
</script>
</html>
Am I wrong by someway?. Can someone please help me?
First Include All Dependencies
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
Than include Angular Material JS file
<script src="https://gitcdn.link/repo/angular/bower-material/master/angular-material.js"></script>
Looks like to don't include the ngMaterial js files
I'm developing an app in AngularJs, which has to display a server generated pdf to the user.
Using pdf.js I successfully downloaded and displayed a pdf, the issue is that now I have to provide to the user a functionality to print it.
I see two ways:
When the button is clicked, open a new window and re-download the pdf to show the print preview. But this'll overload the server;
Download the pdf somewhere with angular, and let pdf.js only to render it, then to print use the previous approach only with a local file. But I don't know where save the file.
I'm missing something, there are other ways?
Thank you.
Have a look at the PDF.js demo app - it includes a print button!
https://mozilla.github.io/pdf.js/web/viewer.html
There is an npm package which can do exactly this https://github.com/legalthings/angular-pdfjs-viewer
Usage
<!DOCTYPE html>
<html ng-app="app" ng-controller="AppCtrl">
<head>
<title>Angular PDF.js demo</title>
<script src="bower_components/pdf.js-viewer/pdf.js"></script>
<link rel="stylesheet" href="bower_components/pdf.js-viewer/viewer.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-pdfjs-viewer/dist/angular-pdfjs-viewer.js"></script>
<script src="app.js"></script>
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.some-pdf-container { width: 100%; height: 100%; }
</style>
</head>
<body>
<div class="some-pdf-container">
<pdfjs-viewer src="{{ pdf.src }}"></pdfjs-viewer>
</div>
</body>
</html>
I'm having a hard time getting Angular to work inside a Windows Universal App. I'm using Visual Studio 2015.
I'm trying to follow the instructions here: https://github.com/winjs/angular-winjs
In the html head section I have:
<!-- WinJS references -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>
<!-- angular -->
<script src="angular-winjs.js"></script>
When I run the app I get an error in the angular-winjs.js file:
var module = angular.module("winjs", []);
The error is that angular isn't defined.
So this could be something simple, but I'm having a hard time figuring out what the problem is.
The instructions say:
You must also add this module to your list of angular module
dependencies:
angular.module('your-module', ['winjs', 'other-module-you-depend-on', 'etc']);
I have no idea what my "list of angular module dependencies" is.. but since I can't even access angular I don't think that's the (main) problem.
You need WinJS libraries (ui.js, base.js and the style ui-light.css / ui-dark.css), AngularJS libraries (angular.js) and finally angular-winjs library (angular-win.js). In your code you are missing Angular library. That's why angularjs is still undefined.
Needed files to get started with angular-winjs:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/css/ui-light.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/base.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/ui.js"></script>
<script src="https://cdn.rawgit.com/winjs/angular-winjs/master/js/angular-winjs.js"></script></script>
Working sample for you to get started:
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Working sample</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/css/ui-light.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/base.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/ui.js"></script>
<script src="https://cdn.rawgit.com/winjs/angular-winjs/master/js/angular-winjs.js"></script></script>
<style>
<!-- You need define yourself the styles for templates -->
.win-listview {
width: 600px;
height: 300px;
border: solid 2px rgba(0, 0, 0, 0.13);
}
.miniTemp {
width: 282px;
height: 70px;
padding: 5px;
overflow: hidden;
display: -ms-grid;
}
</style>
</head>
<body>
<div ng-app="workingsample" ng-controller="ratingCtrl">
<!-- listview -->
<div>Selected count: {{selection.length}}, indexes: {{selection.toString()}}</div>
<win-list-view id="mylistview" item-data-source="ratings" selection="selection" items-reorderable="true">
<win-list-view-header>This is a ListView header</win-list-view-header>
<win-item-template>
<div class="miniTemp">
This list view item's rating is: {{item.data.rating}}
</div>
</win-item-template>
<win-list-layout></win-list-layout>
<win-list-view-footer>This is a ListView footer</win-list-view-footer>
</win-list-view>
</div>
<script>
angular.module("workingsample", ['winjs'])
.controller("ratingCtrl", ['$scope', function ($scope) {
$scope.ratings = [
{ "rating": "Too much" },
{ "rating": "Bigger than yours" },
{ "rating": "Too small yep" },
{ "rating": "Why me" },
{ "rating": "Rekt m9" }
];
$scope.selection = [];
}])
</script>
</body>
</html>