I'm trying to replicate a prior project written in pure JS into a React project. This project makes extensive use of the Google API JavaScript Client to access the Youtube Data API, and I'm encountering problems I did not encounter on the original project.
The error I encounter is odd and I shall explain. I have added the following to my api key/ oauth client credentials: http://localhost:8000. Actually, this is how it was on the original project - it is unchanged. What is odd now is this error I get:
"Not a valid origin for the client: http://Localhost:8000 has not been whitelisted for client ID {id}. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID."
I double checked and it is in fact present, but I noticed that the first letter in "local" is uppercased, so I added that specifically. The whitlisted urls are now as follows:
http://localhost:8000
http://Localhost:8000
After adding that, I get the same error again, but missing a second L - http://LocaLhost:8000.
A few prior searches on stack overflow mentioned clearing browser cache and hard reloading but that has not solved this issue. Does anyone have any suggestions as to what the error may actually be?
EDIT: I've narrowed this down to have something to do with React. If I pull up my old project on my local host it works successfully on the default port for Live Server - 5500. Though if I try to run the React app on my localhost:5500 after closing live server, it fails. Any ideas?
Related
TL;DR: Is it possible to test Prebid header bidding with Prebid.js v1.6.0 with a locally running web server?
I have created a library for integrating Prebid header bidding into web applications built with React. It works fine using Prebid 0.34.6 and I use it successfully in production.
I'm now migrating my library to use the latest version of Prebid, 1.6.0. I've followed the migration guide carefully and implemented all the changes outlined there.
To test my code, I've set up a demo application that runs on a local dev server.
In the debug output of the application, I can see that bids are received (log says INFO: Bids Received for Auction with id: aa5d34f4-3eb7-4cb0-a756-6f7cc4a18568).
However, no creatives are shown in the ad slots. My bidsBackHandler callback function receives an empty object as argument. When I call pbjs.getAdserverTargeting() on the browser's developer console, I also get an empty object.
On the Prebid example pages, there is a basic Prebid.js example shown for integrating Prebid into a web page, along with a JSFiddle.
I use the exact same and units and GPT configuration as used in the fiddle in my demo application, to no avail – no creative in the ad slots, only the “house ad” fallback, empty response to the bids back handler, empty ad server targeting.
Then I discovered if I copy the code from the basic Prebid.js example fiddle to an HTML page on my local dev server, it also fails the same way – no creative in the ad slots, only the “house ad” fallback, empty response to the bids back handler, empty ad server targeting.
I then created a sandbox with my demo (→ https://codesandbox.io/s/k5w8mr9o23), and there, I do get the desired result, the demo creative is shown.
It seems that with Prebid 1.x, you cannot get ad slots filled when running on localhost.
Can anyone confirm this? Is there a way to make this work?
What's happening
The Prebid library needs cookies to work. It fails on your local dev server because cookies are problematic when running the web server on localhost.
You can verify this by typing document.cookie in your JavaScript console on the codesandbox demo and on your local server: a __gads cookie will be set where the demo works, but not on localhost.
__gads is a cookie set on your domain by Google ads. This is probably an issue on their side, not Prebid's.
How to fix it
The easiest way to fix this, is to avoid pointing your browser to localhost (or to 127.0.0.1 or other local IP addresses).
Instead set a different hostname for 127.0.0.1 (preferably containing at least two dots), and use such one.
You can do this by adding an entry to your hosts file. Here instructions for Windows, Mac, Linux).
In my case (Linux system; should also work on Mac) I added the following line to /etc/hosts:
127.0.0.1 www.localhost.localdomain
Then directed my browser to www.localhost.localdomain:3000 and everything was working.
I can see that the __gads cookie is set at this address, while it's not set on localhost:3000.
On this page there is an example of how to include the Google Drive Picker in a plain JavaScript web page. I've copied and pasted the sample code into a file on my machine, and followed the instructions for replacing the example strings with my own API key, Client ID, and App ID.
If I serve the page from localhost using python -m SimpleHTTPServer 8000, and visit the page, it fails in two ways. First, the Drive dialog that pops up says "There was an error! The API developer key is invalid." Second, on the console, I see the errors below. Searching the web tells me that this is probably because I'm using a non-HTTPS connection, from which the Google API tries to make an HTTPS connection to Drive. (Contrary to what they errors seem to say.)
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('http://localhost:8000').
(anonymous) # cb=gapi.loaded_0:46
Uncaught ReferenceError: init is not defined
at onload (https://docs.google.com/picker?protocol=gadgets&origin=http%3A%2F%2Flocalho…22%7D))&rpctoken=6pstmf1ss7m2&rpcService=v8gvn97850jj&thirdParty=true:3:54)
If I serve the page from localhost using this handy python script for an SSL web server, and visit the page, it fails in a different way. The Drive dialog that pops up says the following.
400. That’s an error.
Error: origin_mismatch
Request Details
proxy=oauth2relay379676703
immediate=false
scope=https://www.googleapis.com/auth/drive
origin=https://localhost:8000
response_type=token
redirect_uri=postmessage
state=912029351|0.3907265328
client_id=[REDACTED]
include_granted_scopes=true
jsh=m;/_/scs/apps-static/_/js/k=oz.gapi.en.eBn7I_cE2GI.O/m=__features__/am=AQ/rt=j/d=1/rs=AGLTcCNXKKlDNVVUdz0bvaxNh7fYe-hpSQ
gsiwebsdk=1
That’s all we know.
Although this seems to suggest that the Drive API doesn't want to hear from localhost, I have the credentials for the app (in my Google Developer Dashboard) set to accept requests from https://localhost:8000/* and http://localhost:8000/*.
What am I doing wrong?
You can't use localhost as the 'origin' address - that's a limitation of Google APIs. To deal with this issue, you might want to go for one of the options suggested in this question - either use a URL-shortener or configure your hosts file to have a custom URL resolved to 127.0.0.1.
I wanted to integrate the Youtube Data API in my application. For the same reason, with reference to the following link,
https://github.com/youtube/api-samples and create my client id and tried running the code.
I am working with Javascript + HTML. While running the code I am getting the following error.
Load denied by X-Frame-Options: https://accounts.google.com/o/oauth2/auth?client_id=AIzaSyARXJSURlAnAm48f3uXok0rB7GrEGb3pLc&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube&immediate=true&include_granted_scopes=true&proxy=oauth2relay311121687&redirect_uri=postmessage&origin=http%3A%2F%2Flocalhost%3A8080&response_type=token&state=475509781%7C0.2158929842&authuser=0 does not permit cross-origin framing.
Can anyone suggest me what went wrong and how can I fix the same.
Try to break down your requested URL to the minimum. Maybe there is one GET that conflicts with other configs.
I am trying to get the "hello world" app for the Rdio web playback API working. I cloned the repo and opened the hello.html file. When I click play, the following error appears:
Uncaught TypeError: Cannot call method 'rdio_play' of null
I am getting that error because apiswf, which rdio_play is being called on, is null.
The relevant code: apiswf.rdio_play($('#play_key').val());
In the issues for the repo, I found that another user had the same problem. That user figured out that her problem was that she hadn't started the local server. So it seems that the local server, if it was running, would put the needed swf in the element #apiswf. But it's not running.
After carefully reading the readme and the comments in the code that it directed me to, and what seemed to be the relevant parts of the Javascript, I still don't understand how to start the local server. Thank you.
I will answer my own question. I asked about this in the issue I linked to in the question details, and the following has now been added to the project's readme:
You must run this example from a web server (local or otherwise). The
Web Playback API does not support urls that begin with 'file://'.
So, it wasn't working for me because I was just opening the hello.html file from my file manager. I needed to be serving the file from a server. I set up a simple, local node.js server to serve the files, and it then worked.
I wrote a Google Maps API wrapper in JS, did some local tests with static html, and everything worked just fine. Then I loaded the files into a local web server running in localhost:8080, tested the map panels, and once again, everything worked just fine.
Then a week went by, I added a map to a page, and I couldn't get it to load. Nothing has changed (that I know of anyway, obviously something has), and static tests continue to work just fine, but when I try to load the API from the server I get this in the debug console:
XMLHttpRequest cannot load http://maps.google.com/maps/api/js?sensor=false.
Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.
I read a bit around, but I still can't understand the error, much less fix it. Can someone please give me a hand?
edit: I use a simple tag to load google's js. No jQuery, no nothing.
Thanks in advance!
#Santiago hopefully I can help you now :) The error you are receiving is due to Google's prohibiting of cross site scripting. You can find the info here: Google which also references:Wikipedia Article
It looks like you'll need to create a proxy service for your client on your public facing webserver. Since the request comes from your public webserver and the reply goes back to your webserver it will meet the same domain requirements that Google requires. I do not know enough python yet to create a pythonic cgi proxy but I have to think that there are many different solutions out there already. Plus you will be limited by your server as to what type of solution you employ.
HTH!
~MWR