Setting headers in the model hook via ajaxSetup

I’m trying to set the headers before making my call and it’s not working.

model: function() {
		debugger;

		Ember.$.ajaxSetup({
			beforeSend: function(xhr) {
				xhr.setRequestHeader(
					'Authorization', 'bearer 123456'
				)
		}});

   		return Ember.$.getJSON('http://addresss/api/locations').then(function(e) {
			debugger;
			console.log(e);
		});
	}

This keeps giving me the following error message:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access.

The problem was setting the request header before making my 1st call; it wasn’t needed for this call. Once I moved it inside of my first getJSON call it worked fine.

model: function() {
		return Ember.$.getJSON('http://address1').then(function(locs) {
			Ember.$.ajaxSetup({
				beforeSend: function(xhr) {
					xhr.withCredentials = true;
					xhr.setRequestHeader(
						'Authorization', 'bearer 123456'
					);
			}});
			return Ember.$.getJSON("https://address2").then(function (props) {
				return {
					localDir: "/",
					locations: locs,
					properties: props
				}
			});

		});
	}
1 Like