I need help on setting up the laravel backpack on live server.
So at first i got trouble loading the asset since it used http for the image and css
http://example.com/images/ and http://example.com/css/
I can solve that problem using this code I got
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
The assets are loaded correctly (it shows https://example.com/images/... when i inspeced it)
But somehow some crucial contents are not loaded with https, here's the screenshot:
With the error
Access to XMLHttpRequest at 'http://example.com/admin/elfinder/connector' from origin 'https://example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
Here's the code of the error
<!-- This file is used to store sidebar items, starting with Backpack\Base 0.9.0 -->
<li>
<a href="{{ backpack_url('dashboard') }}">
<i class="fa fa-dashboard"></i>
<span>{{ trans('backpack::base.dashboard') }}</span>
</a>
</li>
There are several thing that didnt't get updated to https as well such as some CSS(from the vendor/crud), scripts, the post method, and the logo
I think that I can copy paste the meta tag to the backpack_url, but I have no idea where is it or how it works.
I am very new to this, any suggestion is appreciated
Thanks!
It looks like your Laravel installation think that you are running on a HTTP server, while the client's request was made over HTTPS
These issues generally happen as a result of having a proxy in front of Laravel.
As a first point of call, ensure that your trusted proxy configuration is correct. This will cause Laravel to trust the X-Forwarded-Protocol header, and intern to generate the correct https URLs.
If you can't get the proxy configuration working, you can always force https URL generation by adding this in your AppServiceProvider
if($this->app->environment('production')) {
\URL::forceScheme('https');
}
Related
welcome. I made an experiment project to check (laravel-with-vue) and uploaded it to Heroku. But the screen appears blank and when checking the item it appears:
<body data-new-gr-c-s-check-loaded="14.1012.0" data-gr-ext-installed="" cz-shortcut-listen="true">
<div id="app">
<app></app>
</div>
<!-- Scripts -->
<script src="http://blogy-new.herokuapp.com/js/app.js"></script>
</body>
And this website for more details: https://blogy-new.herokuapp.com/
But on localhost it works fine:
in heroku :
Your problem is super straight forward to fix, if you check the chrome console, you will see this error:
Mixed Content: The page at 'https://blogy-new.herokuapp.com/' was loaded over HTTPS, but requested an insecure script 'http://blogy-new.herokuapp.com/js/app.js'. This request has been blocked; the content must be served over HTTPS.
It is saying that you are asking for your js file using HTTP, but your page is HTTPS, so you have to rewrite your js file URL to HTTPS and it will be fixed:
<script src="https://blogy-new.herokuapp.com/js/app.js"></script>
It is working in your localhost because it is HTTP.
I have a Laravel+Vue app that I successfully installed on Heroku and Laravel part works here (https://shoomilka-todoapp.herokuapp.com/), but my Vue code for this application doesn't want to work. Code you can see here https://github.com/shoomilka/todoapp.
Can you help me, please to fix the error of why Vue doesn't work on Heroku?
It works on local environment well.
Try inspect your website and look at the console tab. you will see this error.
Mixed Content: The page at 'https://shoomilka-todoapp.herokuapp.com/'
was loaded over HTTPS, but requested an insecure script
'http://shoomilka-todoapp.herokuapp.com/js/app.js?time=1590194712'.
This request has been blocked; the content must be served over HTTPS.
If your website delivers HTTPS pages, all active mixed content delivered via HTTP on this pages will be blocked by default.
The best strategy to avoid mixed content blocking is to serve all the content as HTTPS instead of HTTP. you can use laravel secure_assets method this generates a URL for an asset using HTTPS
<script src="{{ secure_assets('js/app.js') }}?time={{ time() }}"></script>
or simply just set 'url' => 'https://youDomain.com' in config/app.php and .env APP_URL=https://yourDomain.com
I have an issue on my website.
When I accessed the website by IP everything is good but when I access the website by domain name I got this error:
Mixed Content: The page at `<URL>` was loaded over HTTPS, but
requested an insecure stylesheet `<URL>`. This request has been
blocked; the content must be served over HTTPS.
https://141.105.67.4/en/games
https://g11games.com/en/games
Can you please help to solve this issue.
As the error states, you website is being loaded via https, but the scripts contained within the website, are being loaded via http. Likely, in your config, you have set APP_URL to point the http URL, so all assets on your website are using that as the base URL. Changing that to HTTPS should resolve the errors.
fixed by adding
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
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>
I have the alert of duplicate content. All the website doesn't use HTTP, only the login page and pages with contact form.
How I fix this? The solutions I found is for all the website, but, I only the login page and pages with contact form is in https and ignore the http, and the others pages, only http.
You should use
<link rel="canonical" href="..." />
on all your web page available over http AND https to said which version should be indexed.
See https://support.google.com/webmasters/answer/139066?hl=en