hey everyone,
Recently, I deployed my vue-cli website project on Netlify. However, upon opening the website, I encountered the following error message: Mixed Content: The page at 'https://xxxx.netlify.app/' was loaded over HTTPS, but requested an insecure script 'http://yyyy/something.js'. This request has been blocked; the content must be served over HTTPS.
Has anyone else faced similar issues and do you have any suggestions for resolving this? Any help would be greatly appreciated.
I am aware of the same-origin security policy implemented by browsers to safeguard user data. Unfortunately, as my website operates on the client-side, I lack control over the server-side, making CORS unavailable for use. Additionally, since I am sending not only GET requests, JSONP is not a viable solution either.
For instance, consider the following scenario: A visitor is on 'https://mywebsite.netlify.app/#/login' and upon entering their username and password and clicking the login button, the userAccountLogin function is triggered, initiating the request:
//-------------in login.js---------------------
import request from 'path here'
const userAccountLogin = ({ account, password }) => {
return request('/login', 'post', { account, password })
}
// ----------in request.js--------------------
import axios from 'axios'
const baseURL = 'http://apiserver.net/'
const instance = axios.create({
baseURL,
timeout: 5000
})
export default (url, method, submitData) => {
return instance({
url,
method,
[method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
})
}Although the project functions well at http://localhost:8080, addressing the cross-origin issue is imperative.
Thank you all for your assistance :)