What steps do you take to address the CORS error while implementing Google One Tap?

My attempt to implement Google One Tap is encountering issues as outlined in this guide. The errors displayed in the Chrome console are troubling.

Access to XMLHttpRequest at 'https://accounts.google.com/gsi/status?client_id=my_client_id&as=yz1XXXXpK8Vz3DHXXXXXXX' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[GSI_LOGGER]: Check credential status returns invalid response.
_.t @ /_/gsi/_/js/k=gsi.gsi.en.rHUjsM-F3JE.O/am=RAE/d=1/ct=zgms/rs=AF0KOtV7_Nb/m=gis_client_library:34

Failed to load resource: net::ERR_FAILED

Note: I am currently working on my local machine, which might be causing the CORS error. Is there a way to test this setup on localhost? How can I proceed with resolving this issue?

javascriptgoogle-apicross-domaingoogle-oauth

Answer №1

To ensure proper authorization, it is necessary to include 'http://localhost' and 'https://localhost:{port}' in the authorized origins section of the Google Cloud Platform (GCP) console. Replace '{port}' with your frontend port number; for example, 3000 is commonly used for React applications.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing seamless redirection to the login page with Passport in Node.js

I have encountered a persistent issue while using node.js, express, and passport. After successfully validating the user with passport, my application keeps redirecting back to the login page instead of rendering the index page. Is there a problem with the ...

javascriptnode.jsauthenticationpassport.js

Changing global variables within a POST request

I am currently developing a quiz application for the Noops Challenge on Github, utilizing the Fizzbot API available at Noops Challenge. To keep track of the current question and the next question URLs, I have defined global variables to store and assemble ...

javascriptajaxasynchronous

Encountered a problem while attempting to install contextify on Windows 7: Error message indicating that `gyp` failed with exit

After executing the command npm install contextify, this was the output I received: npm http GET https://registry.npmjs.org/contextify npm http 304 https://registry.npmjs.org/contextify npm http GET https://registry.npmjs.org/bindings npm http 304 https:/ ...

javascriptpythonnode.jsnpmcontextify

Angular noticed a shift in the expression once it was verified

Whenever I try to invoke a service within the (change) action method, I encounter this issue: ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: true'. Cur ...

javascripthtmlangulartypescript

How to read a text file in JavaScript line by line

Coding Challenge: <script src="../scripts/jquery-3.1.0.min.js"></script> <script> $(document).ready(function(){ $('#test').click(function(){ var txtFile = '../data/mail.txt'; var file ...

javascripthtmlfiletextline

Utilizing an NPM package in your project

Trying to incorporate a node module called "tagify" into my node.js application has been challenging. Following the instructions in the package's readme file (https://www.npmjs.com/package/@yaireo/tagify#installation), I executed the setup steps as ou ...

javascriptnode.jsnpmejs

Encountering the issue of "Cannot read properties of undefined" while attempting to pass data to a prop

Currently, I am developing a Vue application that heavily relies on charts. The issue lies in the fact that I am fetching data from the database individually for each chart component, resulting in multiple calls and a slower page load time. I am looking to ...

javascriptdatabasevue.js

Scroll through the page effortlessly

Is there a way to make a specific div on my page automatically start scrolling down and then back up when the page loads? This is the JavaScript code I have written: <script> function scrollDownAndUp(speed) { $('#scrollingcontent').anim ...

javascriptjqueryscrollvertical-scrolling

You must use the 'new' keyword to invoke the class constructor NextResponse | Implementing middleware in Next.js | Implementing role-based protection for routes in Next.js |

I've been working on implementing user role-based protected routes in my next.js project using middleware.js, but all of a sudden, I've encountered this issue. I'm not exactly sure why this is happening, so if anyone has a better approach to ...

javascriptreactjsnode.jsnext.jsnext.js13

Customize the React Material UI Autocomplete with a unique dropdown menu and a convenient Add Button feature located at

Seeking assistance in creating an autocomplete feature in React using Material-ui, with a unique custom dropdown design including a button labeled Add New Element positioned at the bottom. https://i.sstatic.net/6rY99.png Various attempts have been made t ...

javascriptreactjsautocompletematerial-ui

Dealing with information obtained through ajax requests

Trying to send data from modal using ajax. Below is the code snippet I am using, however, it seems that the first IF block is causing issues. If I comment it out, I can access the $_POST['id'] variable, but otherwise, it doesn't work. ...

javascriptphpjqueryajax

What is the best way to eliminate an iframe from inside itself using javascript?

Although I am aware of similar questions being asked before, I find myself having to raise this question again along with some attached code because I am struggling to figure it out. In my JSF project, I have two .xhtml files. The first one is mainPage.xht ...

javascripthtmljsfiframexhtml

Identifying a change in the source location of an iframe element

I am working with an iframe object that is currently set to a specific page's URL. Here is an example: <iframe src="http://en.wikipedia.org/wiki/Special:Random"></iframe> My goal is to display an alert whenever the location of the iframe ...

javascripthtmlcss

One interesting concept: Using Node.js domains for each Express request within another domain

Dealing with Errors in Node - A Frustrating Journey As I work on structuring a simple Node application, the issue of error handling becomes paramount. Cluster -> Worker -> Server Domain -> Express Request Domain The goal is to prevent a serve ...

javascriptnode.jsexpressnpmnode.js-connect

Ways to access component load status in Next.js

I'm currently developing a basic Pokedex to showcase all Pokemon. I am utilizing a map function on an array of Pokemon objects to display all the cards in this manner: {pokemons.results.map((el, i) => { return ( <di ...

javascriptreactjsnext.js

LinkButton not triggering on Master Page when accessed from Second Child Page in ASP.NET

I am currently working on a project in ASP.NET (Framework 4.0) where I have implemented an Asp LinkButton in the Master Page that is linked to two different pages (Home.aspx and service.aspx). The question at hand is: The LinkButton1 functions properly on ...

javascriptc#asp.net

Setting up CSP headers with Express and Node.js: A step-by-step guide

I have been trying to make <script> tags work in an express/node.js environment, but they keep getting blocked by the content security policy. Despite attempting to use various node modules like express-csp-header or csp-header, none of them solved ...

javascriptnode.jsexpresshttp-headerscontent-security-policy

Background Disappears Following Website Relocation

Recently, I created a PowerPoint presentation and then converted it to HTML using the conversion tool available at . The result on their website is exactly what I wanted, with a perfect layout. However, when I downloaded the zip file and uploaded the conte ...

javascripthtmlcssbootstrap-4ubuntu-18.04

serializeArray encounters difficulty in locating certain input elements

I've created this HTML layout: <div class="col-md-12"> <div class="form-group"> <label>Mini description (displaying the latest added destinations and meta description)</label> <textarea class="for ...

javascriptjqueryhtml

Encountered an error while attempting a server-side fetch with NextJS - TypeError: Unable to parse the URL from the address httр://localhost

I encountered an issue while trying to retrieve data from another resource using an API endpoint in NextJS (development mode). The error message I received is as follows: Error - TypeError: Failed to parse URL from httр://localhost:3000/api/test at Ob ...

javascriptnode.jsnext.jsfetchnext.js13