This is not only due to a different protocol (HTTP on your website and HTTPS on accounts.google.com ), it is also due to the fact that the domain does not match (and, in this case, the port), the restriction imposed by the Same origin policy .
This policy stops www.evil.com from loading a site such as www.bank.com inside a set of frames (or a popup if cropping is disabled) and then accessing the DOM. If access to the DOM could be obtained, this would be a serious security risk, since any website can read your personal data on another website.
You can allow access by implementing the CORS policy and displaying headers on the server side to allow other specified domains to read the content, however this will be on the Google side in your case. Therefore, if https://accounts.google.com does not implement the CORS policy, you will not be able to modify the client flow on the server side. Another barrier is that even if CORS has been implemented, it does not allow access to the DOM. However, you will be able to receive content from another domain, protocol or port through AJAX calls. The target site will also need to display the header Access-Control-Allow-Credentials: true so that authentication data (i.e. cookies in this case) is sent with the request and response read by your domain.
Can I use https for local development?
To answer your initial question, the answer is yes. This can be a self-signed certificate for most purposes, and it will not affect this particular error message in your browser (since the browser user decided to accept and trust the certificate).