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

Add "localhost" to the list of allowed origins in the settings file, without the protocol and port.

Answer 2

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));
}

Answer 3

I believe your requests do not match by headers or methods (POST, GET, PUT, etc)

Try this one or something similar in you way of conf.
[EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]

Answer 4

As Miklós has mentioned one of the sites should have a different url than localhost. I've made a quick test and it worked without https so the steps are the follwowings:

1. Go to the IIS Manager and create a new site. Add the path of your sensenet install's webfolder as physical path and add a hostname other than localhost.

2. Add your custom hostname to your hosts file (\Windows\System32\drivers\etc\hosts)

3. Open sensenet's admin surface (aka. Content Explorer) and add this new url to the Default_Site's urllist (you can modify the list if you edit the Site content)

With these steps above I managed to fix the CORS error.