I pushed my one page React project to github pages. While the page appears, it doesn't function correctly. It's a basic app where users search through an API and then when they click on a movie it is added to their watchlist. However when I enter my query through the search, nothing happens as opposed to local host where the movies appear and everything functions correctly.
When I inspect it via the console, I get the following error: The page at '' was loaded over HTTPS, but requested an insecure resource ''. This request has been blocked; the content must be served over HTTPS.
Here is my package.json
{
"name": "watchlater",
"homepage": "https://myusername.github.io/watchlater/",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"bootstrap": "^4.5.3",
"gh-pages": "^3.1.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Is there something else I need to change? I followed the instructions here(https://create-react-app.dev/docs/deployment) to publish it on gh-pages but the actual functionality doesn't work.
this error is called "mixed-content" You are trying to access via "HTTP" on an "HTTPS" site because this vulnerable to eavesdropping attacks by hackers and this is a violation.