Troubleshooting Cross-Origin Resource Sharing (CORS) problem with Google Sign-In on Smart

I am trying to implement Google sign-in functionality for a TV, so I have been using the sign-in flow specifically designed for TVs and Devices. You can find more information about it here: https://developers.google.com/identity/sign-in/devices

While testing with Postman or curl, everything works as expected. However, when I try to do the same in my browser, I encounter a CORS error:

XMLHttpRequest cannot load https ://accounts.google.com/o/oauth2/device/code. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http: //localhost:81' is therefore not allowed access. The response had HTTP status code 400.

This is the code snippet I am using:

var data = {
    client_id: '<my cliendId>',
    scope: 'email'
};
var r = new XMLHttpRequest();
r.open('POST', 'https://accounts.google.com/o/oauth2/device/code', true);
r.setRequestHeader("Content-type", "application/json");
r.onreadystatechange = function () {
    if (r.readyState === XMLHttpRequest.DONE) { 
        if (r.status === 200) {
           console.log('hooray!');
        }
        else {
            console.log('oh no');
        }
    }
};
r.send(JSON.stringify(data));

For web sign-ins, redirection to Google's page helps avoid the CORS issue. But for TV/device sign-ins, I need to receive a code that can be displayed to the user for further action on another device.

It's worth noting that this code is within an iframe. I also tested it outside the iframe and encountered the same issue.

UPDATE I tried changing the setRequestHeader to 'r.setRequestHeader("Content-type", "application/x-www-form-urlencoded");' and modified the send method to "r.send("client_id=&scope=email");".

  • The console log shows the error message: "https ://accounts.google.com/o/oauth2/device/code. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:81' is therefore not allowed access.",
  • The Network tab in devtools indicates Status Code = 200 (with no Response),
  • However, when checking the status using r.status in the code, it returns status = 0.

Is there anyone who has successfully implemented Google sign-in for TVs/devices using JavaScript?

Answer №1

It seems that CORS is not the issue here. Instead, you are receiving an error response without the necessary Access-Control-Allow-Origin headers.

Try using your browser's developer tools to analyze the HTTP response. Hopefully, you will find a detailed error message to help troubleshoot the issue.

Answer №2

After some trial and error, I managed to get this working using my backend server. Here's how I displayed the Google sign-in code on the TV for the user: 1. The TV client sends an http request to my server, 2. My server authenticates with Google using my credentials, 3. Google responds back to my server, 4. Finally, my server sends the response containing the code to the client for display.

Although this method may not align perfectly with the documentation, it is effective in practice and has solved the issue for now.

Answer №3

Just sharing my experience for future users:

I encountered the issue where Chrome was not allowing localhost to pass through Access-Control-Allow-Origin. To resolve this, I found a solution by adding a Chrome extension recommended in this thread.

By using this extension, it enabled me to make requests with superagent or fetch directly in the browser.

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

What are the implications of incorporating listeners in redux action creators?

While developing my app, I have a feature that involves constantly monitoring location changes and updating the store accordingly. One question that has arisen is whether it would be beneficial to keep the listeners inside the action creator rather than th ...

IDEA 2021.2 NPM SCRIPTS: Looks like there are no scripts available

Searching through the npm scripts, I am unable to locate any, however package.json does contain: ...

Identify the name of a specific location within a provided text

As a PHP developer, I am in the process of adding a search feature to my application that will allow users to search using keywords and location. For example: "Plumbers in York", "Electricians in Birmingham" or "Gardeners in NE63" Each search string cons ...

Encountering issues with Nodemailer when attempting to send emails to incorrect recipient addresses

When using Nodemailer SMTP to send an email, it works fine with valid/existing email accounts. However, I encounter a 500 error when entering an email address that does not exist. Although I understand that the email is not sent because it does not exist, ...

Top method for displaying radio buttons as switchable buttons within a web form

I want to customize the appearance of my radio buttons on a form to make them look like toggle-able HTML buttons, similar to the examples shown in these Bootstrap examples. By using Flask, Bootstrap, and jinja2, I've successfully converted my radio bu ...

What is the best way to retrieve the final outcome from a function?

Hey everyone! :) Lately, I've been putting effort into developing a function that can return multiple THREE.js materials simultaneously. However, I've hit a roadblock. I'm struggling to make the function return both the MeshBasicMaterial ob ...

The website no longer uses AJAX calls and does not display any errors, although it used to do so in the past

I've noticed that my website is no longer making the ajax call it used to make before I made some changes to my code. However, I can't seem to figure out what exactly I changed. The function call appears to be correct as it triggers the initial a ...

One way to invoke JavaScript within an AJAX response is to use it to close a form div after successfully submitting the form

I've set up a form that, upon submission, sends its data to another PHP script for validation using AJAX. Validation errors are displayed in a div within the form, while a success message is shown if the validation passes. However, I encountered an i ...

Encountering an issue while trying to create a user in Firebase

I am currently following a tutorial on Vue.js from Savvy Apps, which utilizes Firebase with Firestore. As the tutorial mentions that Firestore is still in Beta, I anticipate potential changes - and it seems like that might be happening in this case. While ...

Node Webkit - Custom Save As Dialog Supporting Various File Formats

Is it possible to create a 'Save As' feature with multiple file format options using Node Webkit? I am looking for something similar to this desired result: https://i.sstatic.net/ifuxJ.png Currently, with native NW, I can only display two optio ...

Is it better to use a canvas for a more efficient animation when changing the background image on pagescroll?

I'm currently working on a parallax website that consists of a sequence of around 400 images. The background images change dynamically as the user scrolls through the page, creating a smooth animation effect. While I have managed to implement the scro ...

Switch to display only when selected

When I click on the details link, it will show all information. However, what I actually want is for it to toggle only the specific detail that I clicked on. Check out this example fiddle Here is the JavaScript code: $('.listt ul').hide(); $( ...

Avoiding flickering when the browser back button is clickedAvoiding the flickering effect

As I work on developing an Asp.Net application, a challenge has arisen. In order to prevent users from navigating back to the login page after logging in, I have implemented JavaScript code successfully. However, when clicking the browser's back butto ...

Guide on implementing datatables.js in a Vue.js2 project

I am looking to implement a dynamic Datatable in my Laravel and Vue.js project. I have integrated the datatables.js library for displaying my data. However, when I fetch data from an API call which returns an array, I am facing issues with populating the d ...

Executing a JavaScript function within a React web application

Having trouble calling JS functions from ReactJS? I recently encountered an issue when trying to import and call a JS function in a button onClick event in my React project. Specifically, when trying to use this.abtest.events.on in the handleButtonColor fu ...

What is the best way to extract the value from a Material UI Slider for utilization?

I am looking to capture the value of the slider's onDragStop event and store it as a const so that I can use it in various parts of my code. However, I am unsure about how to properly declare my const sliderValue and update it. Any guidance on where a ...

What is the best way to detect the window scroll event within a VueJS component?

Looking to capture the window scroll event in my Vue component. This is what I have attempted so far: <my-component v-on:scroll="scrollFunction"> ... </my-component> I have defined the scrollFunction(event) in my component methods, but it ...

Guide on accessing a div by using the class name of another div

If I have five divs where the first four share the same class, while the fifth has a different class. How can I target any of the first four divs using the class name present in the fifth div which is labeled as "otherclass" in this scenario? No IDs are ...

Is there a way to link two HTML files containing jQuery within an HTML index file?

I'm currently working on creating an index page for a pair of HTML files that utilize jquery. Let's break down the structure of these files: Emps1, Emps2: These are two HTML tables that start off empty. TabA_stats, TabB_stats: Each HTML file ha ...

Utilizing Thymeleaf With JavaScript in Spring Boot: A Comprehensive Guide

Within my Spring Boot project, I am attempting to utilize Thymeleaf for injecting data into a JavaScript file that undergoes preprocessing with babel via WebPack. The Thymeleaf setup is outlined as follows: @Bean public SpringTemplateEngine templateEngine ...