I'm trying to proxy to a certain API endpoint that returns an html page but I get the error
Access to font at 'https://data.domain.com/v3/assets/fonts/glyphicons-halflings-regular.woff2' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET https://data.domain.com/v3/assets/fonts/glyphicons-halflings-regular.woff2 net::ERR_FAILED
Inside my angular app, I have three different targets that I am proxying to. The first two proxies work fine but the other is a bit weird.
My proxy.conf.json file looks sth like this...
{
"/API": {}, // First proxy works fine
"/info": {}, // Second proxy fine too
"/data": {
"target": "https://data.domain.com/v3/uk",
"secure": false,
"pathRewrite": {
"^/data": ""
},
"changeOrigin": true,
"logLevel": "debug"
}
}
So inside my data service, I define a variable data that contains the path '/data' and I pass that as the path in my POST request like so...
private data = '/data';
public fetchData(data: Data) {
return this.http.post(this.data, data, {responseType: 'text');
}
Upon making that post request, I'm expecting the returned value to be some html code that I'd like to bind to my template. Herein lies the problem. You see, the returned HTML looks something like this...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
<!-- Bootstrap -->
<link href='https://fonts.googleapis.com/css?family=Ubuntu:300' rel='stylesheet' type='text/css'>
<link href="https://data.domain.com/v3/assets/css/bootstrap.min.css" rel="stylesheet">
<link href="https://data.domain.com/v3/assets/css/loading-bar.min.css" rel="stylesheet">
<link href="https://data.domain/v3/assets/css/custom.css" rel="stylesheet">
</head>
<body
<p class="title">Page Title</p>
</body>
</html>
See that bootstrap import? I think that's what's causing the problem because inside the bootstrap.min.css code, references to the glyphicons-halflings-regular font are made like so...
url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'),url(../fonts/glyphicons-halflings-regular.woff) format('woff'),url(../fonts/glyphicons-halflings-regular.ttf) format('truetype')
Hence for each of those font formats, I get the exact same error repeated.
How can I solve this?
Related
I'm trying to get the HTML DOM from the following website: https://www.inputbcn.com/en/tickets#/events
The 'default' DOM of this website its the following:
<!doctype html>
<html lang="">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div id="xceed-widget"></div>
<script src="https://s3-eu-west-1.amazonaws.com/xceed-widget/2019-version/dist/loader.js" type="text/javascript"></script>
</body>
</html>
As you can see, when the page loads, a JavaScript script is called which will fill the page DOM.
I want to get the full page DOM after the script is executed and I'm using PhantomJS for this purpose. I began with the following code:
var page = require('webpage').create();
page.open("https://www.inputbcn.com/en/tickets#/events", function(status) {
console.log("Status: " + status);
if (status === "success") {
console.log(page.content);
}
});
But after executing this piece of code, I can see the response status fails.
How can I get the full document of this specific website?
NOTE: this answers did not help my purpose.
I would like to get the parameters in a URL and use them to generate an og:image meta tag in my SPA. The specific purpose is to have a dynamic thumbnail for a given url. The idea is for crawlers to be able to find the appropriate thumbnail.
example URL:
https://my.app/#/post?uid=abc&pid=123
These two parameters will not necessarily always be included. I hope it won't cause an issue.
My understanding is that crawlers generally only check the html for metadata. How could I include a bit of code in my html before the metadata? (I am relatively new to HTML)
Would I be able to put a script in the head tag? Are variable in the script available outside of the script? Can I use variable in the URL address of my og:image tag?
<!DOCTYPE html>
<html>
<head>
<meta property="og:image" content="https://my.app/{uid}/{pid}/thumb.png" />
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="Get Dressed. Better than you ever had">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="vestiqweb">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>VESTIQ</title>
<link rel="manifest" href="manifest.json">
</head>
<body id="app-container">
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-analytics.js"></script>
<script>
var firebaseConfig = {
//config info
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js?version=14" type="application/javascript"></script>
</body>
</html>
I was able to put a script before the meta tags and used window.location.href to get the URL. I used URLSearchParams to extract the parameters. However, I can only get the second parameter and not the first. If I add an '&' before the uid it works, but makes the url look weird... "?&uid"
<script>
const queryString = window.location.href;
const urlParams = new URLSearchParams(queryString);
const uid = urlParams.get('uid')
const pid = urlParams.get('pid')
if (uid != null && pid != null)
document.getElementById('urlThumb').content = `https://my.app/posts%2F${uid}%2F${pid}%2Furl_thumb.jpg?alt=media`;
</script>
Question
How can I serve different HTML (entry) files for an SPA application (Vue) in ASP.NET Core?
Explanation
Depending on a condition, I would like to serve a different HTML page (much like a controller would do for a non-SPA). The page would still include the entry point for Vue apps <div id="app">, but some other changes should be done before serving the HTML.
I know I somehow have to change the startup.cs file because that renders the HTML with app.UseStaticFiles() and app.UseSPAStaticFiles()
Example
Condition 1 is fulfilled, base.html is served from client -> public -> base.html
Condition 2 is fulfilled instead, special.html is served from client -> public -> special.html
Code
The basic HTML looks something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Title</title>
</head>
<body>
<noscript>
<strong>We're sorry but this webpage doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
The important parts of startup.cs looks like this:
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist";
});
// ....
app.UseStaticFiles();
app.UseSpaStaticFiles();
// ....
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
if (env.IsDevelopment())
{
endpoints.MapToVueCliProxy(
"{*path}",
new SpaOptions { SourcePath = "ClientApp" },
npmScript: "serve",
regex: "Compiled successfully");
}
// Add MapRazorPages if the app uses Razor Pages. Since Endpoint Routing includes support for many frameworks, adding Razor Pages is now opt -in.
endpoints.MapRazorPages();
});
// ....
app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
});
i'm trying to deploy my react app through firebase but after deploying i get a blank page and the SyntaxError: expected expression, got '<'. i think this is because it's reading the < from html but i'm not sure how to solve this. below is the index.html form my build folder which is initialized as the source for firebase
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link href="../src/App.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather:900" rel="stylesheet">
<link rel="manifest" href="/CV/manifest.json">
<link rel="shortcut icon" href="/CV/favicon.ico">
<title>Lorenzo Wijtman</title>
<link href="/CV/static/css/main.1b15713e.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/CV/static/js/main.1b785adb.js"></script>
</body>
</html>
my firebase.json content below
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Your HTML contains this script include:
<script type="text/javascript" src="/CV/static/js/main.30b4dcd1.js"></script>
If you try to load this URL, you will see that you're getting back your original HTML, instead of a JavaScript file. Since you told the browser to expect JavaScript, it is complaining about the angular brackets.
It looks like you're not deploying a /CV/static/js/main.30b4dcd1.js. Since you're telling Firebase Hosting to rewrite everything to /index.html, that's what it does when there is no matching file for a URL.
I have a marketplace/web application with thousands of static single page apps.
Wish to add a Web App Manifest for each single page app in the <head> </head> tag of their corresponding stem_url (The {root}/index.html for all the urls of a given SPA).
The standard method:
<link rel="manifest" href="/manifest.json">
…does not seem like a good way to go forward because this would mean thousands of manifest.js files being dumped into the /public folder (it's a rails app!) and it would eventually make the app/assets compilation job very heavy as this number goes up.
Is there a way we could inline manifest json just like we do the style tags:
<style>
body { // style here }
…
</style>
An equivalent of manifest declaration:
<manifest>
{
"name": "HackerWeb",
"short_name": "HackerWeb",
…
}
</manifest>
You can inline the json by using a data:url. So instead of the standard
<link rel="manifest" href="/manifest.json">
it would be
<link rel="manifest" href='data:application/manifest+json,{ "name": "theName", "short_name": "shortName", "description": "theDescription"}' />
I wanted to inline it too and tried it just now. It works
Improved answer
As mentioned by RADXack, this works great
<link rel="manifest" href='data:application/manifest+json,{ "name": "theName", "short_name": "shortName", "description": "theDescription"}' />
But what if you want to add more attributes like the colors or start_url?
Then on your server you could add:
const manifest = JSON.stringify({
name: "React Doc",
short_name: "React"
start_url: "/",
background_color: "#fffff",
theme_color: "#ff00ff",
display: "standalone",
});
const HTML = `<!DOCTYPE html>
<html lang="en">
<head>
<link rel="manifest" href='data:application/manifest+json,${encodeURIComponent(manifest)}' />
...rest of your code`
encodeURIComponent will convert all special characters for you.
This way, you are sure that whatever the data being passed is, it'll be URL friendly
The main thing to remember is that the manifest request is still just a network request.
So you can Add Query Params
/manifest.json?title=Hello&icon=.....
Or you could do:
/manifest.json?appId=1234
OR you can just use a pretty URL:
/manifest/1234
Then on your server you can return the JSON that you want.