Cross-origin resource sharing setting isn't applied

Question

I'm running SenseNet 7.0.0, running it with ASP.NET 5.2.3 and I'm trying to run an api call from an Angular (Typescript) application. The Angular application runs on localhost:4200 and the ASP.NET application runs on localhost:55064. I followed this tutorial for installing Sensenet and used this tutorial for installing WebPages.

When I run an api call, I get this error:

The 'Access-Control-Allow-Origin' header has a value 'http://localhost:55064' that is not equal to the supplied origin. Origin 'http://localhost:4200' is therefore not allowed access.

In the Content Explorer, I navigated to Root/System/Settings/Portal.settings. In the settings, I added the next code to the bottom of the file:

,
AllowedOriginDomains: [ "http://localhost:4200", "http://localhost:55064/" ]

I've also tried it with [ "*" ] and [ "localhost" ] instead of the two localhosts. Here is a screenshot of the portal.properties file. I didn't forget to click the save button after changing the value. I expected this would fix the issue, but it didn't. Even though it should not involve a restart, I tried restarting the asp.net project and the server. That didn't resolve the problem either. I tried these solution because the sensenet wiki and the sensenet docs stated that the url's of external applications should be added to the AllowedOriginDomains to whitelist them.

How do I fix the error above, which I get when I try to reach the API with an external program?

---

I don't think the Angular call is the issue here, but just in case:

Import statement:

import {HttpClient} from '@angular/common/http';

HttpClient injection:

constructor(private http: HttpClient) {
}

Angular api call:

testApiCall() {
  this.http.post(
    Configuration.ServerWithApiUrl + '/Odata.svc/(\'Root\')/Login?metadata=no',
    '"username" : "admin", "password" : "admin"')
    .subscribe(data => this.callResult = data);
}

Here is the error one more time:

The 'Access-Control-Allow-Origin' header has a value 'http://localhost:55064' that is not equal to the supplied origin. Origin 'http://localhost:4200' is therefore not allowed access.

---

This is an ajax call that is runned from the asp.net project on localhost:55064. That shows the succes message. It also shows the succes message when I run it from a stand-alone html file. It shows the error when I run it from a stand alone file too. In the error instead of "localhost:4200", it shows "null".

function testLoginCall() {
    $.ajax({
        url: "/Odata.svc/('Root')/Login?metadata=no",
        dataType: "json",
        type: 'POST',
        data: JSON.stringify({
            'username': "admin",
            'password': "admin"
        }),
        success: function (d) {
            console.log('You are logged in!');
        }
    });
}

Answer 1

It turns out this is a bug or limitation in Sensenet 7.0.0. You can see the status here.

For now, a workaround is to build the Angular project using ng build --base-href=~/Scripts/Angular and paste the contents of the dist folder inside the /Scripts/Angular folder in the ASP.NET project. Then, replace the contents of the _Layout.cshtml file with the contents of the index.html file from the dist folder, put back the @RenderBody() in the _Layout.cshtml and run the ASP.NET project

Both these api calls now work using the workaround:

testLoginApiCall() {
  this.http.post(
    Configuration.ServerWithApiUrl + '/Odata.svc/(\'Root\')/Login?metadata=no',
    '{"username" : "admin", "password" : "admin"}')
    .subscribe(
      data => console.log('Succes!', data),
      error => console.log('An error occured.', error));
}

testCreateWorkspaceCall() {
  this.http.post(
    Configuration.ServerWithApiUrl + 'OData.svc/(\'Root\')',
    'models=[{"__ContentType": "Workspace", "DisplayName": "Workspace"}]')
    .subscribe(
      data => console.log('Succes!', data),
      error => console.log('An error occured.', error));
}