Ajax - "Access-Control-Allow-Origin" error in ember.js

Question

I would like to know your opinion on the issue in this simple code in ajax, which has the problem Access-Control-Allow-Origin, already tried several ways defenir the ember "Access-Control-Allow-Origin": "* " but without success, so I wonder if someone with the same problem found a solution.

I use the url address localhost: 4200 and already tried with a subdomain of firebase in both cases the error was always the same.

The ajax request:

import Ember from 'ember';
import { isAjaxError, isNotFoundError, isForbiddenError } from 'ember-ajax/errors';

export default Ember.Controller.extend({
    ajax: Ember.inject.service(),
    actions: {

        code() {

            var cliente = '***';
            var redirectUri = 'http://localhost:4200/teste';
            var client_secret = '***';
            var code = '***';
            var grant_type = 'authorization_code';
            var data =
                    "client_id=" + cliente +
                    "&redirect_uri=" + encodeURIComponent(redirectUri) +
                    "&client_secret=" + client_secret +
                    "&code=" + code +
                    "&grant_type=" + grant_type;

            this.send('post', data)

        },

        post(data) {

            this.get('ajax').post("https://login.live.com/oauth20_token.srf", {
                method: 'POST',
                headers: {
                    "Access-Control-Allow-Origin": "*",
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: data,
                dataType: 'JSON',

            });
        },
    }});

My content Security Policy:

contentSecurityPolicy: {
    'connect-src': "'self' http://localhost:4200 https://*.googleapis.com https://login.live.com/oauth20_token.srf",
    'child-src': "'self' http://localhost:4200",
    'script-src': "'self' 'unsafe-eval' https://login.live.com",
    'img-src': "'self' https://*.bp.blogspot.com https://cdn2.iconfinder.com http://materializecss.com https://upload.wikimedia.org https://www.gstatic.com",
    'style-src': "'self' 'unsafe-inline' ",
},

The error is:

XMLHttpRequest cannot load https://login.live.com/oauth20_token.srf. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

Answer 1

This doesn't actually seem like an Ember related question. The problem you are having is exclusively backend related. For ajax requests to work backend should serve the proper 'Access-Control-Allow-Origin' header in response. Otherwise your browser would not accept such responses and throw an error that you are seeing. It's not Ember related in any way it's just how browsers work.

Now to fix this issue you would have to add the proper client server name to your backend 'Access-Control-Allow-Origin' headers. I.e. if you are going to serve your Ember app from https://example.com that is what you need to add to 'Access-Control-Allow-Origin' header.

So let's assume you just want the ways to bypass this messages.

1. There are plenty of browser extensions that would disable CORS check in your browser for development. This way would work just fine if you are using localhost but plan to move to real server in the future and have a way to actually set 'Access-Control-Allow-Origin' header on backend.
2. Let's assume you don't have any way to change the backend header now but desperately want to test how the client app would work on your remote https://example.com. You would have to setup a remote server to proxy all your requests to the target backend modifying the headers that are sent in response so your browser would accept them. This way you don't have to use any chrome extensions to disable CORS. One of the simplest ways to setup such server would be to use the following package - https://www.npmjs.com/package/express-http-proxy . The configuration for your case would be pretty straightforward.

sample express app: var proxy = require('express-http-proxy'); var app = require('express')();

app.use('/', proxy('www.example.com', {
    intercept: function (rsp, data, req, res, callback) {
        res.append('Access-Control-Allow-Origin', '*');
        callback(null, data);
    }}));

app.listen(3000, function () {
    console.log('listening on port 3000');
});