Enable CORS for all Origins for SystemLink REST API?

[Mason.Chou]

I'm writing a custom web application that will be utilizing SystemLink's REST API. I'm unable to use any of the API calls in my development environment due to CORS. See below error message:

Access to XMLHttpRequest at 'https://systemlink.local/login/login-redirect' (redirected from 'https://systemlink.local/nitestmonitor/v2/products') from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

I've already enabled CORS for all origins through NI Web Server, but I'm still running into this error. A quick Google search suggest that SystemLink is still attempting to authenticate the CORS preflight request (https://stackoverflow.com/a/42172732). 

I don't believe this isn't an issue with my web app, because I'm able to host it on the SystemLink web server and the CORS issue goes away. This error message only applies when I try to do local development on my computer.

Is there any way where I can configure this so that this issue goes away? The workaround at the moment is pretty annoying.

[JoshuaP]

You may want to check out this document if you haven't already. It is mainly focused on creating custom web applications using NXG Web Module, however it has some generic information as well.

https://github.com/ni/systemlink-web-interface-template

Even with CORS enabled, you will still need to ensure your application is passing in the appropriate credentials.

[NI_Test_Profile]

Sorry, posted as test profile 🙂

[andrei.rogobete · Accepted solution]

From what I see, you are developing you app using Angular (Angular's default port is 4200). First, please try to add the following configuration under the proxy configuration file that you have setup in your Angular aplication:

const PROXY_CONFIG = [

    {

        // Proxy everything except the Web Application that you are developing

        context: ['/**', '!/plugins/<your-web-application-name>/**'], // It doesn't matter if your built application is found under htdocs/plugins/<your-app-name>

        target: "http://<server-address>:<port>", // The server to which you try to proxy to

        secure: false, // set this to "true" if using HTTPS

        changeOrigin: false, // set this to "true" if proxying to a different hostname (Sometimes the app might not proxy correctly if proxied to different hostnames)

        headers: {

            "X-NI-Auth-Method": "Basic" // This will prompt you the first time when you serve the web application locally (using "ng serve") for a username and password -> Unfortunately, I only tried Basic Auth for now but I would expect that this supports additional authentication methods with some research.

        }

    }

]

module.exports = PROXY_CONFIG;

Secondly, here is how I configured the NI Web Server configuration against CORS and remote access:

Note: I have the name of the server machine under the "Prefered host name for generated URLs and ceritifaces" but I believe that is only used when using HTTPS.

Lastly, I am currently using HTTP. You might end up with some certificate issues with HTTPS and Angular (clients don't automatically trust self-signed certificates when you create them in the "HTTPS" tab). However if you really want to use HTTPS with self-signed certificates, I found a blogpost where you can find how to configure your angular proxy to trust the certificate -> https://medium.com/medialesson/debug-angular-apps-locally-with-a-self-signed-ssl-certificate-9819158...

Hope this helps

[Mason.Chou]

Thanks for the answers! Setting up the proxy for Angular worked out great.