SystemLink Forum

cancel
Showing results for 
Search instead for 
Did you mean: 

Enable CORS for all Origins for SystemLink REST API?

Solved!
Go to solution

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.

 

0 Kudos
Message 1 of 5
(2,153 Views)

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.

0 Kudos
Message 2 of 5
(2,106 Views)

Sorry, posted as test profile 🙂

0 Kudos
Message 3 of 5
(2,099 Views)
Solution
Accepted by topic author Mason.Chou

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:
 
andreirogobete_0-1624631398993.png

 

 

 

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

Message 4 of 5
(2,094 Views)

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

 

0 Kudos
Message 5 of 5
(2,055 Views)