Trying to load a local .json-file from the same folder in D3 (and logging it to the console), but there are two errors in the console:
d3.v5.js:5908 Fetch API cannot load
[buildings.json - file]. URL scheme must be
"http" or "https" for CORS request. json # d3.v5.js:5908 (anonymous) #
index.html:10
d3.v5.js:5908 Uncaught (in promise) TypeError: Failed to
fetch
at Object.json (d3.v5.js:5908)
at index.html:10 json # d3.v5.js:5908 (anonymous) # index.html:10 Promise.then (async) (anonymous) # index.html:10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://d3js.org/d3.v5.js"></script>
</head>
<body>
<script>
d3.json("buildings.json").then(data => console.log(data))
</script>
</body>
</html>
Does anybody see the reason & have a solution?
d3.json uses fetch.
export default function(input, init) {
return fetch(input, init).then(responseJson);
}
https://github.com/d3/d3-fetch/blob/master/src/json.js
So you are dealing with the same problem described in these SO posts.
Importing local json file using d3.json does not work
"Cross origin requests are only supported for HTTP." error when loading a local file
Fetch API cannot load file:///C:/Users/woshi/Desktop/P5/p5/JSON/birds.json. URL scheme must be "http" or "https" for CORS request
You are facing a problem with cross origin resource sharing which is a security feature by your browser.
Two options two avoid this:
use a webserver. To just run a simple webserver for your static html/js files something like the npm http-server (https://www.npmjs.com/package/http-server) could be used
Change your chrome startup parameters and let it know that you want to ignore this security feature. You can do this by changing your startup configuration for example like this
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="%LOCALAPPDATA%\Google\Chrome\User Data\development"
The parameters --disable-web-security --user-data-dir are the important part here.
Note: Just use this for development. You allow cross origin requests by this for all websites you visit.
Another possibility mentioned in How to launch html using Chrome at "--allow-file-access-from-files" mode? is to use a browser extension like Web Server for Chrome
Related
Recently, I set up Nginx caching for a server. I went about doing this by including the following files in my Nginx config.
As a result, the site loads much faster. However, I cannot seem to bring up the admin part of the CMS. It tries to open the window (iframe?), but then promptly closes it with the following error displayed:
In Chrome:
SecurityError: Blocked a frame with origin "https://www.example.com"
from accessing a cross-origin frame.
In Firefox:
SecurityError: Permission denied to access property "document" on
cross-origin object
In my nginx.conf the following settings seem pertinent:
# Add Referrer-Policy for HTML documents.
# h5bp/security/referrer-policy.conf
map $sent_http_content_type $referrer_policy {
~*text/(css|html|javascript)|application\/pdf|xml "strict-origin-when-cross-origin";
}
# Add Cross-Origin-Policies for HTML documents.
# h5bp/security/cross-origin-policy.conf
# Cross-Origin-Embedder-Policy
map $sent_http_content_type $coep_policy {
~*text/(html|javascript)|application/pdf|xml "require-corp";
}
# Cross-Origin-Opener-Policy
map $sent_http_content_type $coop_policy {
~*text/(html|javascript)|application/pdf|xml "same-origin";
}
# Cross-Origin-Resource-Policy
map $sent_http_content_type $corp_policy {
~*text/(html|javascript)|application/pdf|xml "same-origin";
}
In the site's Nginx configuration, I have the following mention to include the Nginx configs mentioned above. If I comment out this entry, everything works again
#includes templates for basic Nginx behavior, such as caching
include h5bp/basic.conf;
It appears that I need to tweak some settings as they appear too strict. Am I correct? What should the settings be? If it helps, I use DjangoCMS version 3.7.4
I have a page generated by Flutter-Web shops and it is a blank page. And I have an error in the console. This happened after uploading the build web of Flutter into GitHub Pages.
Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://adamtechnologynl.github.io/') with script ('https://adamtechnologynl.github.io
/flutter_service_worker.js?v=2470069411'): A bad HTTP response code (404) was received when fetching the script.
manifest.json:1 Failed to load resource: the server responded with a status of 404 ()
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
manifest.json:1 Failed to load resource: the server responded with a status of 404 ()
(index):88 Failed to load app from service worker. Falling back to plain <script> tag.
(anonymous) # (index):88
(index):47 GET https://adamtechnologynl.github.io/main.dart.js net::ERR_ABORTED 404
loadMainDartJs # (index):47
(anonymous) # (index):91
I found the solution. This happens when you have put it another directory instead of the root of the GitHub.
So my code is in "https://username.github.io/demo/book-king/belasting-web-v1/" so that last part we should append everything after "https://username.github.io/" also in the index.html. You can solve it by modifying the line (number 17 by me):
Change:
<base href="/">
into:
<base href="/demo/book-king/belasting-web-v1/">
And then you are done.
This solution works. But for me, line no 17 was not <base href="/">.
It was like this <base href="$FLUTTER_BASE_HREF">. Given that FLUTTER_BASE_HREF is a variable, it can be modified.
How?: Provide --base-href argument to flutter build like below
HostingURL : https://<github_user_name>.github.io/project_aj/demo/gh-pages/
Apart from the https://<github_user_name>.github.io should go as the value for --base-href
flutter build web --base-href=/project_aj/demo/gh-pages/
I am getting several warnings when loading my website on Google Chrome similar to the following:
DevTools failed to load SourceMap: Could not parse content for https://mywebsite.com/static/js/2.abcd1234.chunk.js.map: Unexpected token < in JSON at position 0
My webapp is a React application (create-react-app) deployed on AWS Amplify. I do not get these warnings when running the app locally. How do I get rid of these warnings?
This is a problem caused by using react-router with AWS amplify. See this github issue. It suggests adding the following entry in the Rewrites and redirects section of App settings in AWS Amplify:
Source address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address:
/index.html
Type:
200 (Rewrite)
To solve my problem, I added the map extension to this regex:
Source address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map)$)([^.]+$)/>
I checked my Rewrites and redirects settings and it was already configured as per the below answer by "roob" but also had json at the end. I removed it to see if that helped. Either way, I still got the error.
More research with a colleague and found another root cause. Answered here:
AWS Amplify error: Failed to parse source map... file: Error: ENOENT: no such file or directory
I have just started working with WebRTC. I want to use WebRTC with NodeJS.
Currently I have tried webrtc.io package. When I write a basic code for using WebRTC, I get the following JavaScript error.
Error is :
Uncaught TypeError: Type error
rtc._socket.onopen
Error Location:
webrtc.io.js:65
Here is my code.
CLIENT CODE :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 getUserMedia</title>
<script src="socket.io.min.js" type="text/javascript"></script>
<script src="webrtc.io.js" type="text/javascript"></script>
<script>
rtc.connect('ws://abc.in:8001');
</script>
</head>
<body>
<video id="webcam" width="500" autoplay></video>
</body>
</html>
SERVER CODE :
var webRTC = require('/usr/local/node_modules/webrtc.io').listen( 8001 );
console.log( "Server Listening" );
webRTC.on( "connection", function() {
console.log( "Hi" ); // This gets executed successfully.
});
Q1.
Since "Hi" does get printed successfully, I don't know if JS error is actually making a difference or no. Help me resolve this JS error issue.
Issue also reported here.
Q2.
Hitting http://abc.in:8001/ through browser prints "Not implemented". Is that an issue?
Q3.
I wish to stream the audio+video from a mic and webcam to the server.
I understand that I need to create a peer to peer connection to achieve streaming of audio+video to server. Browser should act as one peer and the server would act as the second peer.
How do I send the WebRTC stream to the server? Lack of documentation of the webrtc.io package isn't helping me either.
Please help
EDIT : Browser used is the latest Google Chrome, Version 31.0.1650.57 m
I uploaded simplest webRTC code at
http://github.com/aungthuya-jse/simplest-webRTC/tree/master
You need to add the node_modules to under of project folder by installing
npm install express
and
npm install webrtc.io
after installation you will see /project-folder/node_modules/express folder and webrtc.io folder
I'm working with application cache and I'm facing the below issue:
In Tomcat Server:
When the server is online and if the page is accessed for the first time, the files specified in the manifest file are caught successfully in the application cache.
When the server is offline, when we try to access the cached page, there is an error in the browser console (Application Cache Error event: Manifest fetch failed (-1) which is quite normal as per my findings in the internet) but the application cache works fine.
In Weblogic server:
I tried to run the same code in Weblogic server, in online mode, the files are cached as expected. But in the offline mode, for the first time the page is loaded, it works fine, but when I see the console the status of the application cache goes to OBSOLETE mode and so if I do a refresh of the page again, it throws me a 404 error. Also, I'm not getting the "Application Cache Error event: Manifest fetch failed (-1)" which I get when I try to run the code in tomcat server. Please let me know what's that I'm doing wrong. Below are the files:
index.html
<html manifest="demo.appcache">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js" ></script>
</head>
<body>
<h1>Basic example of page using Application Cache</h1>
<p>Disconnect from the internet and try to reload this page. It should load without requiring you to connect to the internet.</p>
</body>
</html>
manifest file (demo.appcache)
CACHE MANIFEST
CACHE:
style.css
script.js
index.html
demo.appcache
NETWORK:
*
style.css
body{
background-color: #333;
}
h1{
color: #c94054;
}
p{
color: #fff;
}
script.js
if (!window.applicationCache){
alert('It seems that Application Cache is not supported in this browser. Please use a browser which supports it.');
}
web.xml
<mime-mapping>
<extension>appcache</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
This problem comes when the browser encounters the manifest line in the html tag, it tries to download the appcache file from the server. But when the server doesn't have this file it returns 404 error, so the application cache goes to OBSOLETE event.
So in this case, the possible reasons are
1- your server doesn't contain this file
2 - If your server has this file but not returning to the browser, this happens when the server is running but your application is actually undeployed.
So try stopping your server rather than just undeploying your applciation from the server instance.
Hope it works.