I took a freshly-cloned copy of the Boomerang library and ran make to produce the default boomerang.js script.
I copied that file, along with the following HTML document into a directory.
<html>
<head>
<script src="/boomerang.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
user_ip: "127.12.34.56",
beacon_url: "http://127.0.0.1:8008/beacon",
beacon_type: "POST"
});
</script>
</head>
<body>
<h1>Hello RUM</h1>
</body>
</html>
I then served that out of host running on port 8008 and viewed the html file. When I check the access log, I see
127.0.0.1 - - [17/May/2016:15:13:31 +0200] "GET /beacon?u=http%3A%2%2F127.0.0.1%3A8008%2Frum.html&v=0.9&...
That is, the Boomerang library is issuing a GET instead of POST and at a quick glance I can't figure out why. (The /beacon endpoint doesn't actually exist, so it throws a 404, but that is (I hope) beside the point). I'll take a closer look with dev tools, but has anyone experienced this before?
Related
Why is an external script for type="text/babel" not working in ReactJS?
I put the index.html and foo.js in the same folder. Nothing show after I open the index.html file with Google Chrome
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>ReactJS</title>
<script src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script type="text/babel" src="foo.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
foo.js
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('root')
);
Just include the babel file before the main. It will work as expected.
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script type="text/babel" src="./main.js"></script>
You need to run a local server.
For example with https://www.npmjs.com/package/http-server :
npm -g install http-server
cd <path to app>
http-server
Then view your page on http://0.0.0.0:8080
There's also instructions for using python or php to run a local server here https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server .
lite-server package seems a bit more promising https://www.npmjs.com/package/lite-server
In comparison to http-server it:
opens your application immediately in browser
supports HMR
supports file-based configuration
installation and usage is pretty straightforward:
npm install --global lite-server
cd to your folder in terminal and execute lite-server command
If you go to your developer tools in your browser, you should see a message that CORS blocked the request when trying to open index.html:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource
followed by Reason: CORS request not http
This happens because the request origin that calls Babel to convert your React code to a browser compatible Javascript code come from a local file, such as file://, which triggers the CORS error. In order to avoid this error, your request origin should come from a http or https origin, which can be achieved by running a local web server. You can read more details about why it happens at MDN docs
If you have Python 3 installed, run the following command in the terminal, where you index.html is located. If you need help setting Python and the web server, check this MDN documentation:
python3 -m http.server
This will serve your page at http://localhost:8000 and by pasting localhost:8000 into your browser, now it can render your React code correctly.
I'm starting out with ReactJS and I'm following the simple example in the "Gettind Started".
This is my HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="js/reactjs/react.min.js"></script>
<script src="js/reactjs/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel" src="js/main.js"></script>
</head>
<body>
<div id="example"></div>
</body>
</html>
It works. But if I watch the network traffic with Fiddler, I see that main.js is pulled twice from the server. Is that on purpose? bug?
As soon as browser encounters following lines
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel" src="js/main.js"></script>
browser issues http requests for both files. But since js/main.js is of 'text/babel' type for browser it won't be given to JavaScript engine to parse/execute. Rightly so, because the 'main.js' might have ES6 code which browser won't understand as it now. Once babel's browser.min.js loads and executes, it searches for script tag in DOM with type 'text/babel' and then issue XHR request to load that file. After that browser.min.js compiles the code in 'main.js' transform it into ES5 and then executes it. This is the way it works.
Since browser already has 'js/main.js' in its cache from earlier request, the XHR request issued by babel's browser.min.js for 'js/main.js' is served from the cache itself, so there won't be any additional external http request.
I am newly picking up angularJS, cannot figure out my situation here:
Everything goes fine when I just open official phonecat tutorial file.
However, if I create my own project, the binding never displays well, it also shows out "{{ }}".
Pictures show all I got here. I believe nothing wrong with the script referencing, just cannot figure out after tried hundred times.
It seems script referencing is not correct. Make sure that your script reference is correct.
I run the following code and it gave me the expected result.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body data-ng-app>
<p>{{1+2}}</p>
</body>
</html>
See Demo
In the browser check the source. Does angular exist in your browser.
I've set up a REST service, using Spring framework. The service, simply reads some info from database, and represents it in JSON format. The service works properly when accessing it directly via browser (i.e: http://localhost:8080/infractions/get?no=2 works just fine.) But, when I try to access it using angularJS, it doesn't show anything! I've followed this tutorial provided by Spring official website, and here's how my code looks like:
index.html file:
<!doctype html>
<html ng-app>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="get.js"></script>
</head>
<body>
<div ng-controller="getFractionByID">
<p>Fraction Type is: {{get.name}}</p>
</div>
</body>
</html>
get.js file:
function getFractionByID($scope, $http) {
$http.get('http://localhost:8080/infractions/get?no=2').
success(function(data) {
$scope.get = data;
});
}
I'm really new to non-academic programming and I'm rather inexperience, so please help me find out where should I start finding the problem?
Update: Error message:
XMLHttpRequest cannot load http://localhost:8080/infractions/get?no=2. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I've recently completed a Slip PHP API build which interacts beautifully with my Android application. I'm now building a web front-end and for the life of me I can't understand how to request information via GET using ngResource's query function.
My index.html file is:
<!doctype html>
<html ng-app="discussApp">
<head>
</head>
<body>
<div ng-controller="topicsController">
<div>{{ topics }}</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-resource.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
My app.js file:
var app = angular.module('discussApp', ['ngResource']);
app.controller("topicsController", function($scope, $resource, $http) {
var Topics = $resource("http://api.discussorama.com/v1/topics");
$scope.topics = Topics.query();
});
And the information I'm trying to read (I've successfully done this both from Chrome's Advanced REST Client, the browser, and my Android app) is at http://api.discussorama.com/v1/topics (Note: I've temporarily disabled my authentication middleware in Slim PHP to test with Angularjs). The endpoint returns a json response but I'm not seeing anything in Angular besides "[]". The link to the Angular app is http://hwaelapps.com/discuss/web if anyone would like to see exactly what is happening. Thanks in advance for the help. Note: I've tried several ngResource config options including urlencode but it's still not receiving the data so I stripped all that and all the code is directly as is in the question.
The answer was in the console log all along. The error I was receiving was:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
The solution was simply to add
header("Access-Control-Allow-Origin: *");
to my Slim API's index.php file. I guess my shared host isn't configured for CORS.