How to connect my server with my ember cli App

my server is working on the port :3000 and i am using node, express on server side and this is working fine while using curl or REST client.

ember cli server is working on port :4200

I added this code on environment.js for connecting server to client.

contentSecurityPolicy: {
              'default-src': "'none'",
              'script-src': "'self' 'unsafe-inline' 'unsafe-eval'",
              'font-src': "'self'",
              'connect-src': "'self' http://localhost:3000",
              'img-src': "'self'",
              'report-uri':"'localhost'",
              'style-src': "'self' 'unsafe-inline'",
              'frame-src': "'none'"
     }

and my application adapter code is:

import JSONAPIAdapter from 'ember-data/adapters/json-api';

export default JSONAPIAdapter.extend({
    "host": "http://localhost:3000",
    "namespace": "api"
});

running my ember server on this way ember server --proxy http://127.0.0.1:3000 on controller i use ajax call :

            $.ajax({
                    type: 'POST',
                    url: '/blog',
                    contentType: 'application/json',
                    data: param,
                    processData: false,
                    success :
              });

it getting an error: POST http://localhost:4200/blog 500 (Internal Server Error)

i have done all these but i don't know why it's not working. please help me if you have any idea for that .

Solution

You need to understand the difference between two ways to connect to your API:

Proxy

You can use the --proxy option of ember-cli to proxy all requests made to your ember development server that are not handled by ember to your backend.

This is a good way to do this because from the view of your application and browser your backend and your application are on the same host.

If you do so you should not specify the host on your adapter or add your backend to your CSP configuration.

However you can do this only if in production you serve your ember application from your backend.

CORS

The other way to connect to your backend is to make your requests directly to another origin. However this will be CORS requests so they need additional configuration on your backend!

If you want to directly fetch data from a different origin, in browser land your server there needs to deliver additional HTTP headers (CORS Headers).

However you should do this only do this if you will not deliver your frontend from your backend server in production.

If you want to use CORS you should not specify the --proxy flag when you run ember serve, but specify the host and configure your CSP correctly.

I also mentioned that you missed a = in your ember serve call.

Its not ember server --proxy http://127.0.0.1:3000 but ember server --proxy=http://127.0.0.1:3000!

Generally if you do ember serve --proxy=http://127.0.0.1:3000 then a HTTP AJAX GET call to http://localhost:4200/blog should return the same as http://127.0.0.1:3000/blog.

To test this I recommend you to use a HTTP development client like this one.

I assume you get also a HTTP 500 on http://127.0.0.1:3000/blog. Then something is wrong on your backend. Maybe the correct URI is http://127.0.0.1:3000/blogs? that would be embers default.

If you do a call directly to http://127.0.0.1:3000/blogs from your ember application this will however always result in an error if you don't deliver the CORS headers.