Making any API call using React is unsupported

[ofekkazes]

Hi,

For the past few hours I started using the Pfsense API and noted some issues with a React.js application.
Every call being made, with all the headers required returns a response with missing CORS policies.

Adding a CORS extension to allow some policies from the browser had issued a different error which might be helpful in identifying the source.

So it seems like the the issue is most likely connected to having some kind of protection from browser POST javascript calls.
As React.js and other frameworks now use front-end applications with remote APIs and callbacks it might be good to change that protection.

Its worth noting that I'm using pfsense via a remote VM, with the React application in my local PC running on Google Chrome.

Below is my basic request for a token from the API.

login: ({ username, password }) => { const headers = new Headers(); headers.append('Content-Type', 'application/json'); headers.append("Host", "http://172.31.0.25"); headers.append("Origin", "http://localhost:3000/"); const request = new Request('http://172.31.0.25/api/v1/access_token', { method: "POST", body: JSON.stringify({ "client-id": username, "client-token": password }), headers: headers, }); console.log(request); return fetch(request) .then(response => { if (response.status < 200 || response.status >= 300) { throw new Error(response.statusText); } return response.json(); }) .then(auth => { console.log(auth); localStorage.setItem('auth', JSON.stringify(auth)); }) .catch(() => { throw new Error('Network error') }); }

Is there something that can be done?

Thank you
Ofek

[jaredhendrickson13]

Hey!

Thanks for bringing this up. The reason this is happening is pfSense by default does not return any CORS related headers from PHP or it's web server, so most browsers/client-side applications will simply block the request. I'm not exactly sure why you are still unable to make the request after enabling the extension but I think it may be due to the API not responding to OPTIONS requests.

In the short term, you can try playing around with the API code. You can try to manually add the required CORS headers around this line in the APIEndpoint.inc file:
https://github.com/jaredhendrickson13/pfsense-api/blob/066ec98884b0450af8db709883e2ebe1d9f27ecf/pfSense-pkg-API/files/etc/inc/api/framework/APIEndpoint.inc#L68-L69

In the long term, this does express the need for some more advanced API settings being integrated into the API framework and UI. I don't want to assume any CORS headers by default so enabling users to add their own response headers will be a must for integration with frontend web applications. Possibly a toggle to allow or disallow alternate request methods like the OPTIONS method may be helpful as well. I'll work on this and see if I can incorporate such features into the v1.2.0 release.

Let me know if you do find a solution in the meantime, I can update the documentation to include a workaround until a more permanent solution is in place. Once a PR is up to address this, I will update this issue.

Thanks again!

[ofekkazes]

Hi Jared,

Thank you for the swift response, I will add the required headers and will let you know.

Thank you
Ofek

[ofekkazes]

Hi Jared,

I was successfully able to perform API calls from the front end framework by adding the following lines into the APIEndpoint.inc file:

        # Format the HTTP response as JSON and set response code
        header("Content-Type: application/json", true);
        header("Access-Control-Allow-Origin: http://localhost:3000");
        # Header added to support CORS from a specific resource

This has resolved the initial Cross-Origin error, and then had added the following if block to support preflight requests from the browser (that are sending a blank OPTIONS form):

        } elseif ($_SERVER["REQUEST_METHOD"] === "DELETE") {
            $resp = $this->delete();
        } elseif ($_SERVER["REQUEST_METHOD"] === "OPTIONS") {                                                                       
            $resp = APIResponse\get(0);
        } else {
            $resp = APIResponse\get(2);                                                                                         
        }

Please note, the following code was used to request the authentication from the frontend React framework:

login: ({ username, password }) =>  {
        const headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append("Host", "http://172.31.0.25");
        headers.append("Origin", "http://localhost:3000/");
        const request = new Request('http://172.31.0.25/api/v1/access_token', {
            method: "POST",
            body: JSON.stringify({ "client-id": username, "client-token": password }),
            headers: headers,
        });
        console.log(request);
        return fetch(request)
            .then(response => {
                if (response.status < 200 || response.status >= 300) {
                    throw new Error(response.statusText);
                }
                return response.json();
            })
            .then(auth => {
                console.log(auth);
                localStorage.setItem('auth', JSON.stringify(auth));
            })
            .catch(() => {
                throw new Error('Network error')
            });
    }

Thank you
Ofek