Search code examples
javascriptiiscorssharepoint-2010

How to setup CORS setup correctly

We are having an old SharePoint 2010 server, where we want to request data within the network from.

I already know that I cannot request data from other servers due to CORS, but actually as far as I understand is, that have the possibility to allow such requests. Therefore I need to modify the servers HTTP response headers, do I?

I have this setup, but it is not working actually.

Server - SharePoint 2010 - IIS:

enter image description here

I've set the Access-Control-Allow-Origin to my notebook's name (grolne-nb090). On the JavaScript application, I have the following request defined:

onButtonClickHandler(event) {
    event.preventDefault();
    fetch('https://my.sharepointserver.com/sites/IT/_layouts/ArchiveSearch/ajax.aspx?requestType=test', {
        method: 'GET', 
        mode: 'cors',
        headers: {
            'Access-Control-Allow-Origin': 'http://grolne-nb090:3000',
            'Access-Control-Allow-Methods': 'GET, POST, PUT, PATCH, POST, DELETE, OPTIONS',
            'Access-Control-Allow-Headers': 'Content-Type,Authorization,Accept',
            'Content-Type': 'application/json', //'text/plain', //
            'Accept': 'application/json'
        },
        credentials: 'include'
    })
    .then((response) => {
        console.log('fetch data', response);
        return response.json();
      })
    .then((data) => {
        console.log('data',data);
    })
    .catch((error) => {
        console.error('Error on fetch request:', error);
    });
}

The current error message is this:

Access to fetch at 'https://my.sharepointserver.com/sites/IT/_layouts/ArchiveSearch/ajax.aspx?requestType=test' from origin 'http://grolne-nb090:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

If I change the mode to no-cors, I get an opaque answer.

How can I setup the server / application correctly, that I can access this data? Which HTTP response headers I need to set on the server side and how needs the JavaScript request look like?

Just one thought, must the requester URL also use HTTPS? Can that be an issue?

Update

I've googled a lot and it seems that a request to a SharePoint server requires authentication, which the pre-flight does not provide. So the answer from SharePoint seems to be a 401 Unauthorized for the pre-flight and that crashes the whole request.

Now I'm searching, how I can disable authentication for a single SharePoint page... (or if it is possible)

Solution

  • I was able to solve the issue. The problem was, that SharePoint requires authentication, which is not provided in the pre-flight. So the pre-flight gets a 401 Unauthorized and the complete request fails. So I read again the article of Mozilla...

    https://developer.mozilla.org/de/docs/Web/HTTP/CORS

    ... and saw that the pre-flight is not being done on simple requests (see the link above for details about simple requests). So I changed the code this way:

    fetch('https://my.sharepointserver.com/sites/IT/_layouts/ArchiveSearch/ajax.aspx?requestType=test', {
    method: 'GET', 
    mode: 'cors',
    headers: {
        'Content-Type': 'text/plain', 
        'Accept': 'application/json'

    },
    credentials: 'include'
})

    The "magic" is in this case is the 'Content-Type': 'text/plain'. Then the request is handled as simple request and there is no pre-flight happening.

    The HTTP response headers which I have set in IIS worked this way as you can see in the image of the opening post.