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.
Related
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 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');
}
Google Recaptcha is not working on localhost. I have used the admin console to create a key just for localhost and I have even disabled domain validation under advanced settings. I still get an error indicating that localhost is not on the list of supported domains. Code is below
in the head tag of HTML
<script src='https://www.google.com/recaptcha/api.js'></script>
In the body tag of HTML
<div class='form-group'>
<div class="g-recaptcha"
datasitekey="6Leefj0UAAAAAAb8CMhdkGZxmVVhKGxMGkUPqB6z"></div>
</div>
The above site key doesn't have domain validation enabled (I have disabled it out of desperation). So anyone should be able to replicate this error using it. How do I get Google Recaptcha to work?
I have a C# MVC app that makes use of recaptcha security code in a particular view.
In my view i have the following code:
<script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
...
#Html.Raw(Html.GenerateCaptcha("captcha", "white"))
#Html.ValidationMessage("captcha")
When i try to load the page, i get the following error in chrome's debugger:
Mixed Content: The page at 'https://mywebsite.com' was loaded over HTTPS, but requested an insecure resource 'http://www.google.com/recaptcha/api/challenge?k=mykey'. This request has been blocked; the content must be served over HTTPS.
and if i inspect the source of the loaded page, the razor control for recaptcha generates this script tag:
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=mykey">
the src attribute is a http url not a https url.
If anyone knows how i can overcome this error, it would be greatly appreciated.
Thanks,
Kapetanios
Ok here i am posting an answer to my own question again.
It turns out that this:
#Html.Raw(Html.GenerateCaptcha("captcha", "white"))
#Html.ValidationMessage("captcha")
was rendering this:
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=mykey"></script>
The src attribute of the script tag contained http and not https
So, to fix this issue, i just replaced the #html.raw & #html.validate with this:
<script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=mekey"></script>
<noscript>
<iframe src="https://www.google.com/recaptcha/api/noscript?k=mykey" height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea><input name="recaptcha_response_field" value="manual_challenge" type="hidden" />
</noscript>
Doing this stopped chrome debugger from getting the error.
I am working on a Magento application which uses iframe on the product details page.But when I moved the application to the development environment the iframe stopped working.
<iframe width="980px" height="950px" frameborder="0" src="http://www.example.com/somedirectory/index.php?action=main&case=v2&type=std&model=xyz" style="border:none;" id="my_iframe">
<html>
<head></head>
<body></body>
</html>
</iframe>
There is content under head and the body part of iframe when in Live environment.
The iframe code is in the view.phtml file.
Update : when I statically replace the my development site url "http://www.example.com" with live site url in the iframe things start working? But how to fix for the development environment.
Please suggest some solution for this.
There were some unclosed php tags in the php file which was being used by the iframe.
When I closed the php tags properly,it started working.