I am following this Google Firebase Tutorial: https://cloud.google.com/appengine/docs/standard/python/authenticating-users-firebase-appengine
I'm at the last part where it adds the note to the datastore but when I press the button to add the note it doesn't do anything and gives me the following error in Firefox web console:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://backend-dot-i7643225firenotes.appspot.com/notes. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Any ideas what causes this? I haven't touched the code Google provided but I'll include it anyway. The rest of it can be found here:
main.js
// Copyright 2016, Google, Inc.
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
$(function(){
// This is the host for the backend.
// TODO: When running Firenotes locally, set to http://localhost:8081. Before
// deploying the application to a live production environment, change to
// https://backend-dot-<PROJECT_ID>.appspot.com as specified in the
// backend's app.yaml file.
var backendHostUrl = 'https://backend-dot-i7643225firenotes.appspot.com'; //localhost:8081
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "REMOVED",
authDomain: "REMOVED",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
storageBucket: "<BUCKET>.appspot.com",
};
// This is passed into the backend to authenticate the user.
var userIdToken = null;
// Firebase log-in
function configureFirebaseLogin() {
firebase.initializeApp(config);
// [START onAuthStateChanged]
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
$('#logged-out').hide();
var name = user.displayName;
/* If the provider gives a display name, use the name for the
personal welcome message. Otherwise, use the user's email. */
var welcomeName = name ? name : user.email;
user.getToken().then(function(idToken) {
userIdToken = idToken;
/* Now that the user is authenicated, fetch the notes. */
fetchNotes();
$('#user').text(welcomeName);
$('#logged-in').show();
});
} else {
$('#logged-in').hide();
$('#logged-out').show();
}
// [END onAuthStateChanged]
});
}
// [START configureFirebaseLoginWidget]
// Firebase log-in widget
function configureFirebaseLoginWidget() {
var uiConfig = {
'signInSuccessUrl': '/',
'signInOptions': [
// Leave the lines as is for the providers you want to offer your users.
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
//firebase.auth.FacebookAuthProvider.PROVIDER_ID,
//firebase.auth.TwitterAuthProvider.PROVIDER_ID,
//firebase.auth.GithubAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID
],
// Terms of service url
'tosUrl': '<your-tos-url>',
};
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);
}
// [END configureFirebaseLoginWidget]
// [START fetchNotes]
// Fetch notes from the backend.
function fetchNotes() {
$.ajax(backendHostUrl + '/notes', {
/* Set header for the XMLHttpRequest to get data from the web server
associated with userIdToken */
headers: {
'Authorization': 'Bearer ' + userIdToken
}
}).then(function(data){
$('#notes-container').empty();
// Iterate over user data to display user's notes from database.
data.forEach(function(note){
$('#notes-container').append($('<p>').text(note.message));
});
});
}
// [END fetchNotes]
// [START signOutBtn]
// Sign out a user
var signOutBtn =$('#sign-out');
signOutBtn.click(function(event) {
event.preventDefault();
//FirebaseAuth.getInstance().signOut();
firebase.auth().signOut().then(function() {
console.log("Sign out successful");
}, function(error) {
console.log(error);
});
});
// [END signOutBtn]
// [START saveNoteBtn]
// Save a note to the backend
var saveNoteBtn = $('#add-note');
saveNoteBtn.click(function(event) {
event.preventDefault();
var noteField = $('#note-content');
var note = noteField.val();
noteField.val("");
/* Send note data to backend, storing in database with existing data
associated with userIdToken */
$.ajax(backendHostUrl + '/notes', {
headers: {
'Authorization': 'Bearer ' + userIdToken
},
method: 'POST',
data: JSON.stringify({'message': note}),
contentType : 'application/json'
}).then(function(){
// Refresh notebook display.
fetchNotes();
});
});
// [END saveNoteBtn]
configureFirebaseLogin();
configureFirebaseLoginWidget();
});
main.py
# Copyright 2016 Google Inc.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
# [START app]
import logging
from flask import Flask, jsonify, request
import flask_cors
from google.appengine.ext import ndb
import google.auth.transport.requests
import google.oauth2.id_token
import requests_toolbelt.adapters.appengine
# Use the App Engine Requests adapter. This makes sure that Requests uses
# URLFetch.
requests_toolbelt.adapters.appengine.monkeypatch()
HTTP_REQUEST = google.auth.transport.requests.Request()
app = Flask(__name__)
flask_cors.CORS(app)
# [START note]
class Note(ndb.Model):
"""NDB model class for a user's note.
Key is user id from decrypted token.
"""
friendly_id = ndb.StringProperty()
message = ndb.TextProperty()
created = ndb.DateTimeProperty(auto_now_add=True)
# [END note]
# [START query_database]
def query_database(user_id):
"""Fetches all notes associated with user_id.
Notes are ordered them by date created, with most recent note added
first.
"""
ancestor_key = ndb.Key(Note, user_id)
query = Note.query(ancestor=ancestor_key).order(-Note.created)
notes = query.fetch()
note_messages = []
for note in notes:
note_messages.append({
'friendly_id': note.friendly_id,
'message': note.message,
'created': note.created
})
return note_messages
# [END query_database]
# [START list_notes]
@app.route('/notes', methods=['GET'])
def list_notes():
"""Returns a list of notes added by the current Firebase user."""
# Verify Firebase auth.
# [START verify_token]
id_token = request.headers['Authorization'].split(' ').pop()
claims = google.oauth2.id_token.verify_firebase_token(
id_token, HTTP_REQUEST)
if not claims:
return 'Unauthorized', 401
# [END verify_token]
notes = query_database(claims['sub'])
return jsonify(notes)
# [END list_notes]
# [START add_note]
@app.route('/notes', methods=['POST', 'PUT'])
def add_note():
"""
Adds a note to the user's notebook. The request should be in this format:
{
"message": "note message."
}
"""
# Verify Firebase auth.
id_token = request.headers['Authorization'].split(' ').pop()
claims = google.oauth2.id_token.verify_firebase_token(
id_token, HTTP_REQUEST)
if not claims:
return 'Unauthorized', 401
# [START create_entity]
data = request.get_json()
# Populates note properties according to the model,
# with the user ID as the key name.
note = Note(
parent=ndb.Key(Note, claims['sub']),
message=data['message'])
# Some providers do not provide one of these so either can be used.
note.friendly_id = claims.get('name', claims.get('email', 'Unknown'))
# [END create_entity]
# Stores note in database.
note.put()
return 'OK', 200
# [END add_note]
@app.errorhandler(500)
def server_error(e):
# Log the error and stacktrace.
logging.exception('An error occurred during a request.')
return 'An internal error occurred.', 500
# [END app]
