Using the following stack:
AWS amplify
NodeJS
ReactJS (built using create-react-app)
When running amplify mock it automatically assigns an endpoint with HTTP (as can be seen in the terminal and the aws-exports.js file).
I am however hosting my app locally in an HTTPS environment using ($env:HTTPS="true") -and (npm start) so as to better accommodate the social sign-ins which usually require all requests to come from HTTPS even if on localhost.
I constantly have to change my env to HTTP to try out things with the mock backend instead of just maintaining everything in HTTPS.
Is there a way to let the mock backend be served over HTTPS?
I have found a partial answer.
using the chrome browser settings, select privacy and security and go to site settings.
Add the URLS you are requesting over http into the insecure content allowable section. This allows an origin of https to request over http.
Related
I am calling an http endpoint using axios in an excel addin project. However I am unable to call the endpoint because the addin has an https certificate. It gets installed on every project I try to create using the addin cli. Is there a way to disable https so I can call this endpoint? Here is the error.
Mixed Content: The page at 'https://localhost:3000/taskpane.html?_host_Info=####'
was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint
'http://#######'. This request has been blocked;
the content must be served over HTTPS.
First, your question is missing an important detail that I was able to derive, but you should have included, your using NodeJS as your server.
This isn't technically a duplicate, but the question is really How to disable SSL in NodeJS, Yeoman Office-JS Template as it seems you have already figured out you can't call an http endpoint from an SSL enabled Office Add-In.
I'm not 100% how to disable SSL in NodeJS, but try changing the Dev URL to http. In webpack.config.js --> const urlDev = "https://localhost:3000/"; --> const urlDev = "http://localhost:3000/";.
If you have access to the backend server and can get SSL configured, your better off setting up a API Gateway/Proxy such as krakend to proxy http requests.
I know I just had to disable SSL in my project for the same reason, but I use Visual Studio, so I can't test NodeJS.
See --> https://stackoverflow.com/a/71461455/5079799
How can I deploy a js web application that uses an API.
I have hosted it on netlify but it doesn't fetch the data.
Everything works fine on localhost.
Link: hiuhu-theatre.netlify.app
In firefox you can see the request the function getMovies made was blocked, the console shows the reason, it links to this URL.
Basically you're trying to use http protocol for that request when you're over https in your website.
To fix that simply change your "http://www.omdbapi.com/” to start with "https://" instead.
Also, if you can, do not add API key to client side code, if you do so anyone can steal it and use it themselves (and that might make you pay more for the service or reach the limit you have really quick), instead do a request to your back-end server so it fetches the data while hiding the API key.
It works in local because you're using http in local aswell.
I've overrided the getMovies function in my browser to use https and it worked nicely
I have a spring boot application which works over http.I do not want to touch the application - so no keystore etc. I want to use reverse proxy - i.e. the request will land at some other machine over TLS and
will get redirected to my spring boot application over secure socket layer. How it could be done?
Edit: When I try to login to that site, developer tool console tells me:
"Mixed Content: The page at 'https://xxxx-uat.xxxx.com:4200/login' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://151.253.73.106:9091/login'. This request has been blocked; the content must be served over HTTPS."
Nginx reverse proxy is being used.
Best way to do it is to use cloudflare. Cloudflare is free for basic use. You can create a new site, point to your HTTP URL and configure SSL as flexible. So, now your service is behind https. Cloudflare will act as proxy. Request will go to cloudflare via https, then it will be routed to your http.
I am working on Progressive Web App in React and I set up the website on Heroku. When I tests that with Lighthouse I got the warning:
Does not tredirect HTTP traffic to HTTPS
Based on docs:
Lighthouse changes the page's URL to http, loads the page, and then waits for the event from the Chrome Debugger that indicates that the page is secure.
And indeed I can access the website using https or http. Is there a way to redirect that on Heroku?
I found the solution. As I am using Reactthe solution was simple. I created a file static.json in main folder and added "https_only": true there. It "forces" https for all requests. See this section of the buildpack docs.
I am running a backend Laravel API and a frontend Vue.js application.
Option #1 would be to set those two up as follows:
api.example.com => serving the API
app.example.com => serving the frontend appplication
However this gets you in all the trouble with CORS, OPTIONS preflight etc.
So in order to avoid that, I am planning on setting it up like this:
app.example.com/api => serving the API
app.example.com => serving the frontend appplication
So no more CORS problems, but since I am using Webpack I am running into issues in local development. Webpack dev server is serving the frontend at:
app.example.com:8080
So again, I am running into CORS when trying to access the API on port 80 :-(
Help! How can I set this up, so I don't have to deal with CORS yet being able to make use of the Webpack dev server and the Laravel (Homestead) API backend?
I assume it's not possible to serve both Homestead as well as Webpack from the same hostname and port. But is there any set-up that avoids CORS?
There is a way to avoid doing cors requests by using the proxy mechanism. Then you basically have the solution you described with app.example.com/api for the backend and app.example.com for the frontend. The webpack-dev-server takes your requests and forwards them to the configured backend. An exemplary configuration could look like that:
devServer: {
proxy: {
'/api*': {
target: 'http://app.example.com:8080'
},
},
},
Depending on how your backend is set up, you possibly need to have a look at the rewrite function to do some processing of the path before handing the request to the backend.
For more details, please see the webpack-dev-server docs at: https://webpack.github.io/docs/webpack-dev-server.html#proxy
If you want to run this stuff in production, then you will not use the webpack-dev-server but either set up the proxy configuration in the web server you are using (e.g. apache or nginx).
Related answer: CORS error on same domain?
Domain, subdomain and port needs to be the same, which basically means unless you are serving both the app and api from the same server, you need to take care of CORS. There is no escape from that.
Your webpack development environment can help you with your vue.js app only. It cannot do the server side of things. You will need your server on a different port. So you will have to set Access-Control-Allow-Origin:* for all your API requests.
Official reference: https://www.w3.org/Security/wiki/Same_Origin_Policy