Overview
We know that for a developer to adopt the portable bundle into his app as quickly and easily as possible, they need to be able to work with the bundle on their local machine, with the app running in dev mode, with hot module reload and all their other dev tools. Because we are developers as well.
However, we cannot compromise the security of customer data. Because of this, we do not wish to add http://localhost to the list of hosts allowed through our CORS policies.
The CORS is an issue because if you provide, for example, https://intelligence.triumph.io as a baseApiPath
to the bundle and then run it on the dev server on http://localhost, the API will treat the requests from localhost as cross-origin and deny them.
One of the solutions (the one we use during development) to work around CORS is configuring a proxy server on your local machine, which will proxy the requests to our back end.
Webpack Proxy
We are using webpack, and the webpackDevServer
has a built-in proxy that can be configured as follows:
// in your webpack config
devServer: {
proxy: {
// matches /v1, /v2... or /togglz
context: path => /^\\/(v\\d+|togglz)/.test(path),
target: `https://intelligence.triumph.io`,
secure: false
}
},
But any proxy, even your own custom local back-end (e.g., using Node.js), could work for this.
The proxy approach works because CORS policies are only followed when requests are made through the browser. When the requests come from any other source, e.g., curl, Postman, Node.js, etc., the CORS policies are ignored. So if a script from your local machine makes a request to our APIs, everything will work just fine. And if needed, you can safely configure your local proxy to ignore CORS altogether so that your front end can use it freely.
Node.js proxy
We have created a very basic proxy based on Node.js in case you need one. You can find it at https://github.com/kolesan/greenscreens-bundle-proxy.
Follow the instructions in the readme to start using it during local Triumph Intelligence bundle-related development.
Please contact us if the CORS is still an issue after reading this guide, and you need a custom solution or help configuring the proxy.