According to Lighthouse Performance audit, it is recommended to preconnect to origins that will be required on page load.
This is what it suggested to me:
This what I added to my index.html's head tag:
<link
rel="preconnect"
href="https://opentdb.com/"
/>
But then, upon running the audit again, it gives the warning:
Next, I tried adding crossorigin: use-credentials attribute to my link tag but that didn't help.
I'm using Vue3 with Vite v2.8.1. How do I solve this and preconnect to the origin?
Related
One module in our Prestashop platform inserts the google link below:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,regular,500,600,700,100,200,800,900%7CDM+Serif+Display:regular,italic&subset=latin%2Clatin-ext?ver=8739" type="text/css" media="all">
But the browser reports ERROR 404: But when I insert and check the URL into the browser manually - it works?
Does this kind of google link needs to be ref. to in a special way or does any other tags need to be added to it before it will work?
To be honest I'm not 100% sure how I got this right by click around in the dev. console. But this URL here works:
https://fonts.googleapis.com/css?family=Poppins:300,regular,500,600,700,100,200,800,900%7CDM+Serif+Display:regular,italic&subset=latin%2Clatin-ext?ver=7489
Adding tailwindcss to my Phoenix project seems to have broken a lot of the styling. For example, here is a button before adding tailwindcss:
and here it is afterwards:
What can I do to get the benefits of tailwind without breaking my existing styling?
The reason that the native Phoenix styles break is because Tailwind comes with Preflight, which is a bunch of default styles. Preflight can conflict with whatever native styling you might have. That's why it broke in my case. I was able to solve this problem by adding:
corePlugins: {
preflight: false, },
To module.exports in tailwind.config.js. This disables Preflight and lets the native Phoenix styles stay. If you don't need Preflight this is a good choice.
I found the following stop-gap solution: use the approach described in the section entitled "Using Tailwind without PostCSS" from https://tailwindcss.com/docs/installation.
cd assets/static
mkdir -p css
cd css
npx tailwindcss-cli#latest build -o tailwind.css
In whichever file contains the <head> tag (for example root.html.leex) insert this snippet:
<link href="<%= Routes.static_path(#conn, "/css/tailwind.css") %>" rel="stylesheet">
I got best results by putting that above the line with
<link rel="stylesheet" href="<%= Routes.static_path(#conn, "/css/app.css") %>"/>
Otherwise Tailwind overrides some of the styling that comes with Phoenix.
I have deployed my octobercms site on heroku successfully but it is not loading any css/js or image file. All links go to 404. External links are loaded but no local link is working. I have deployed it using Github.
I have tried all of solutions I found anywhere on web but none of them works. All laravel solutions are not working. I can't even access any file manually. Functionality of site is working normally.
currently this is how links are included:
<link type="text/css" href="{{'assets/css/custom.css'| theme}}" rel="stylesheet">
and this is how they are shown when rendered:
<link type="text/css" href="http://pandak-farms.herokuapp.com/themes/codejunkie/assets/css/custom.css" rel="stylesheet">
links should open but all of them are pointing to 404.
demo: http://pandak-farms.herokuapp.com/themes/codejunkie/assets/css/argon.css?v=1.0.1
Finally found the answer. Just setting up an env variable fixes the mixed content issue. set LINK_POLICY to 'secure' either in the .env file or in the config/cms.php
I am trying to to use a texture from my own hosted webserver but putting it into the asset-item tag I get the following error.
> Access to Image at 'http://192.168.137.1:3000/cat2.jpg' from origin
> 'http://localhost' has been blocked by CORS policy: No
> 'Access-Control-Allow-Origin' header is present on the requested
> resource. Origin 'http://localhost' is therefore not allowed access.
The picture is accessible, since I can see it in the webinspector.
It works perfectly in a simple image tag. Does anyone know what to do here?
Thanks!
Update: My code you could find below:
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene>
<a-assets>
<img id="cat" src="http://192.168.x.x:3000/cat.jpg"/>
</a-assets>
<a-sky src="#cat"/> <!-- this code works not (CORS) -->
<a-sky src="http://192.168.x.x:3000/cat.jpg" /> <!-- this code works not (CORS) -->
</a-scene>
<img id="cat" src="http://192.168.x.x:3000/cat.jpg"/> <!-- this code works -->
Solution:
I figured out the main problem: It had nothing to do with A-Frame itself, it was a minor mistake on the server. The headers were specified after the fileserver was initialized. Putting the specification in the initialization phase did the trick... of course... :-D
What's CORS?
This is not A-frame or Three.js or WebVR that is an issue. CORS (Cross-origin resource sharing) happens when the JavaScript (in your situation is that this script https://aframe.io/releases/0.5.0/aframe.min.js ) makes a cross-domain XHR (XMLHttpRequest) call (in your situation is that to http://192.168.x.x:3000/cat.jpg ).
On Wikipedia I've found an image that gives more information about the workflow of CORS.
Your request is a GET-request, there are custom HTTP headers and didn't add Acces-Control-* headers, result an error.
More information about CORS I've found on the Mozilla Developer Network.
Documentation from A-frame
Why does my asset (e.g., image, video, model) not load?
First, if you are doing local development, make sure you are using a local server so that asset requests work properly.
If you are loading the asset from a different domain (and that you do), make sure that the asset is served with cross-origin resource sharing (CORS) headers. You could either find a host to serve the asset with CORS headers, or place the asset on the same domain (directory) as your application.
Why is this happen?1
It looks like the script (https://aframe.io/releases/0.5.0/aframe.min.js ) that must be added, loads the images and that's why <a-sky src="http://192.168.0.253:457/cat.jpg" /> is not working at all. Because the image is loaded from the script that is hosted on A-frame.
If you use <a-assets><img src="http://192.168.0.253:457/cat.jpg" /></a-assets>, the image URL is bound to the a-skys src-attribute. And again the image is loaded from the script on A-frames server and makes a cross-domain XHR call.
1 I'm not 100% sure, but there is a big chance that it's correct. If anyone think that this is not correct, please say it. If it is correct, please say it also.
Solutions
Place the file on your local host web server.
Add the response header Access-Control-Allow-Origin when the image is requested. I think, the value must be http://aframe.io.
After many trial and error, I finally found a way to incorporate images from remote server to my local server without facing CORS errors. The solution is using a CORS proxy instead of doing direct request.
Despite the following code is not the most elegant solution, it works for me.
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="frodo" crossorigin="anonymous" src="https://cors-anywhere.herokuapp.com/http://i.dailymail.co.uk/i/pix/2011/01/07/article-1345149-0CAE5C22000005DC-607_468x502.jpg">
</a-assets>
<!-- Using the asset management system. -->
<a-image src="#frodo"></a-image>
</a-scene>
</body>
</html>
Using CORS Proxy, adds all the headers needed to perform the request to the remote server and gather the objects in the src field.
Please note that the src request is: https://cors-anywhere.herokuapp.com/<url_you_are_looking_for>
After adding HTML5 Prefetch links to head section of default.ctp, all firefox users (in CakePHP application im working on) are keep getting logged out after next page refresh.
Any ideas how to make CakePHP prefetch-friendly?
Here is example prefetch links placed inside head of the page:
<link rel="prefetch" href="/" />
<link rel="prefetch" href="/users/" />
Check if this could be your problem.