I tried to deploy a little node.js app that uses an API REST service from a third party. This API provides me some json served over a URL with HTTP
Now when I deployed the app on Heroku it wil not fetch the data from the API.
This error i got in my inspector
Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure resource ''. This request has been blocked; the content must be served over HTTPS.
It forces me to use HTTPS but I don't own that API, does this mean I cannot use it simply because it's not served over HTTPS or is there a workaround so I can still deploy the application and acces the API over HTTP?
Related
I am trying to serve a build on my network with 2 ports.
1 for frontend which is localhost:3000 and 1 for server with localhost:3001
I currently have the build for my frontend, but the problem here is i wanted to access the localhost:3001
On localhost:3001 which is for development and not for deployment
. As you can see in the image, I can communicate with localhost:3001
But when i try the **BUILD FRONTEND WITH 192.168.254.100:300 ** It can't find my server (port 3001)
EDIT
I'm successful on solving the first problem. But, another problem is i can't access the site on using a mobile phone without cors extension from chrome. And as well as the COOKIES ARE NOT SETTING in order to be authenticated.
This problems occurs due to the CORS policy. Basically, when you send a request from a URL that is different from your server URL, you'll be blocked. For example, if you communicate to your server using its own URL (localhost:3001), it works fine. However, if you do that from your frontend URL, CORS policy will block that. Therefore, in your server, you have to add Access-Control-Allow-Origin in your HTTP response. In Express, you can add the cors middleware.
First, go to your server folder and install cors:
npm i cors
In your entry point file of your server (server.js, index.js, or whatever), insert this line:
app.use(cors()); //This allow any websites to communicate to your server
If you want to only allow your frontend url to communicate and not others:
app.use(cors({ origin: "http://192.164.254.100:3000" })
app is of course from:
const app = express()
Restart the server and it should works fine.
I have an ASP.NET MVC application running on domain a.com and this application is sending an IFrame request to b.com which is a Web API. When I debug this in the local machine (when the application and the API are running on localhost), this IFrame call works fine. But then, when these are deployed to the server, the application and API are on different domains and the IFrame call does not work anymore.
I have identified that the cookies are not sent along with the cross-origin IFrame request. So, I set the cookie properties to SameSite=None and Secure=True. Still, the cookies are not being sent with the request. How can I debug this further?
I am using google chrome version 87.0.4280.141.
See the cookies here:
See the request headers here:
Access to audio at 'https://.amazonaws.com/.mp3' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
We have a vue.js frontend and spring boot backend.
There a tag in a vue.js file which gets the src link by calling spring boot backend server. The backend returns the src link.
As you can see the below is the run time audio component
<audio data-v-3f267e7a="" src="https://****.amazonaws.com/****.mp3" eq-attached="true"></audio>
I am confused as why the browser is throwing CORS error in this case. Please let me know why the error in the first place and how to solve this. CORS is already enabled in spring security file. I already tried with #CrossOrigin annotations in spring controller.
Since your error is CORS, between your vue.js and amazon audio url, spring boot is not related to that.
Commonly CORS said us: No web application can download my resources using javascript.
In your case, amazon is telling you: Your web at localhost cannot download my audios.
If you would be the owner of amazon, and you want any website to be able to download your audios, you just need to add this response header in the audio url:
Access-Control-Allow-Origin : *
How fix it?
Try to use a minimal ajax invocation to dowload the audio url. With this you can verify if url is "downloadable" or has the classic cors headers. Don't forget to test it with a kind of server like one of these
If you can't download it or you get the same cors error as your vue app, you could verify that amazon does not allow this type of usage of audio urls.
Also verify if amazon has a kind of administration web console which allows us the registration of origins. In this case you must add the localhost:8080 or any domain in which your web app is running.
Workaround
If the url is downloadable at backend side, I mean with java and not with javascript, you could create a simple spring controller which will download the audio and return maybe the bytes or another format that your vue app needs. At this point you are the owner, so you could add any CORS header you need.
We're using the HTML5 Application Cache feature:
<html manifest=".appcache">
...
</html>
When returning users navigate to this application they will already have all static files cached and the application is therefore loaded without network requests.
Once the application is loaded it will make AJAX requests to load dynamic content, and the browser will check whether the Application Cache manifest is outdated and possibly download a new version of the application in the background.
Many of our users are accessing this application over insecure connections (HTTP, not HTTPS).
We're in the process of introducing HTTP Strict Transport Security (HSTS) on the servers that host the application.
Implementing HSTS means that our servers will handle requests like this:
If the request is insecure (HTTP only), then the server will respond with HTTP status 301 and a Location header that redirect to the requested URI but changing scheme to https.
Otherwise; if the request is secure (HTTPS) the server will process it as normal but decorate the response with a Strict-Transport-Security header.
So, when a new user open up our application over HTTP they will be redirected to HTTPS instead and then the application cache manifest is installed using the secure location. That's perfect.
However, a returning user (over HTTP) will NOT be redirected to the secure location (because they already have a cached version on the insecure location). The application cache manifest won't load (since it's a redirection). So returning users are stuck with the application version they had cached and they're stuck using HTTP which is no longer allowed. This is very bad.
We need to come up with a way to transition returning HTTP users to the HTTPS version. How would be best do that?
The way I see it there are two problems:
The browser cannot fetch the application manifest (because it is a redirection). It is therefore unable to upgrade the application to a new version.
We could perhaps overcome this problem by configuring our servers to allow /.appcache to be served over plain HTTP.
Even if we do that, the application will still be accessed at the HTTP location (since that what's cached by the manifest)
To workaround that, we might have to implement some kind of javascript logic that changes the scheme of document.location.href to HTTPS.
I don't like this approach, but it's the only one we've got at this point.
We settled on the following solution to this problem:
When server receive an insecure request to get the application cache manifest (/.appcache in our case), then a 404 response is returned instead of the normal HTTPS redirect (301).
Getting a 404 causes the cached manifest to be stale and the browser will therefore attempt to reload the application on the next refresh, which will cause it to fetch index.html and be redirected to the secure location.
I am facing an issue with my hosted project.
The request with link :- http://......./api_tester.html works fine and
provides results, but, it gives CORS 'Access-Control-Allow-Origin' Missing
when the api_tester.html file is accessed via the browser directly.
The URL for the file in the browser is file:///E:/workspace_windows/api_tester.html
Kindly suggest.
It seems you are trying to open the file directly from desktop, hence it is picking its protocol file:// protocol. Use either complete url starting with HTTP or run from any web server. Secondly error you stated means you are trying to access the page hosted on another domain and this usually happens when you do XHR requests to domain other than the one where your file is hosted.
You can add header "ACCESS-CONTROL-ALLOW-ORIGIN" to the file you are trying to access to allow all requests to be accessible from all different domains.