everyone,
I deployed my vue-cli website project to Netlify, but when I opened the website, got this error: 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.
Do you guys have similar problems and got any suggestions for me, I appreciate that.
I know that browser has this same-origin security policy to keep user data safe, but my website is a client-side web, I do not have control of the server-side, which means I cannot use CORS. And I send not only GET requests, so JSONP cannot be the solution.
The example case is like: Visitor was at 'https://mywebsite.netlify.app/#/login', after visitor input username and password, click login button, the userAccountLogin function will be called, and send 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
})
}
The project works well at http://localhost:8080, but needs to solve the cross-origin problem.
Thank you all :)
//-------------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
})
}