Ajax Angular SSL CORS

Question

I actually do not understand this issue. I am not very much into SSL and certificates.

A script on test.kanubox.de (You can try it there and look at the source code) uses ajax to call rest server on sandbox.api.kehrwasser.com/kanubox/v1. Obviously CORS is needed and works well without SSL, thus I assume that CORS is set up correctly. The header data on an OPTIONS-request (preflight) to the API confirms

Access-Control-Allow-Origin: *
Upgrade: h2,h2c
Pragma: no-cache
Keep-Alive: timeout=5, max=100
Content-Type: application/json
Content-Encoding: gzip
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT
Server: Apache/2.4
Expires: Fri, 19 Aug 2016 12:15:58 GMT
Access-Control-Max-Age: 500
Access-Control-Allow-Headers: x-requested-with, Content-Type, origin, authorization, accept, client-security-token, Access-Control-Allow-Origin, X-Frame-Options

But when I switch to https://test.kanubox.de and call the API at https://sandbox.api.kehrwasser.com/kanubox/v1 I get CORS error from FireFox like "(Cross-Origin blocked)

Reason: CORS-Header 'Access-Control-Allow-Origin' missing

(Translated error message)

The certificate is from my hoster and verified by my hoster itself. I'm not sure but is it "self-signed" then? So maybe FF blocks it because it doesn't trust it?

Here is my code:

  var test = angular.module("test", []);

  test.constant('apiConfig', {
      apiUrl: "https://sandbox.api.kehrwasser.com/kanubox/v1"
  });

  test.controller("TestController", function($scope, $http, apiConfig) {

      var credentials = { mail: "[email protected]", password: "12345" };

      // POST REQUEST VIA SSL
      $http({
          url: apiConfig.apiUrl + "/users/auth/",
          method: 'POST',
          data: credentials
      }).success(function(data, status, headers, config) {

          $scope.variable = data;

      }).error(function(data, status, headers, config) {

          $scope.variable = data;

      });

  });

Answer 1

If I browse to https://test.kanubox.de/, then the server certificate is not known in my firefox browser. It is indead a self signed certificated, issued by "Hostpoint DV SSL CA - G2" itself!

To make that SSL certificate work, you need the "Hostpoint" root certificate in your browser. That is exactly how you made it work! So, is was a trusted ROOT certificate issue.

When the SSL problem is solved, then you can look at the CORS issue.

The certificate which is used in https://sandbox.api.kehrwasser.com/kanubox/v1/ is a issued by the well known CA "Let's incrypt". That works fine.