Configure webpack to proxy requests which avoids CORS issues (#914)

README.md

@@ -34,49 +34,33 @@ npm install
 npm run build:watch
 ```
 
-You can now access the web vault in your browser at `https://localhost:8080`. You can adjust your API endpoint settings in `src/app/services/services.module.ts` by altering the `apiService.setUrls` call. For example:
+You can now access the web vault in your browser at `https://localhost:8080`.
 
-```typescript
-await apiService.setUrls({
-    base: isDev ? null : window.location.origin,
-    api: isDev ? 'http://mylocalapi' : null,
-    identity: isDev ? 'http://mylocalidentity' : null,
-    events: isDev ? 'http://mylocalevents' : null,
-});
-```
-
-If you want to point the development web vault to the production APIs, you can set:
-
-```typescript
-await apiService.setUrls({
-    base: null,
-    api: 'https://api.bitwarden.com',
-    identity: 'https://identity.bitwarden.com',
-    events: 'https://events.bitwarden.com',
-});
-```
-
-And note to run the app with:
+If you want to point the development web vault to the production APIs, you can run using:
 
 ```
 npm install
 npm run build:prod:watch
 ```
 
-## Common Issues:
+You can also manually adjusting your API endpoint settings in `webpack.config.js` by altering the `targets` within `proxy`. For example:
 
-### CORS
-
-If you run the frontend and receive a notification after attempting to login that says:
+```typescript
+proxy: {
+  '/api': {
+      target: 'http://localhost:4000',
+      pathRewrite: {'^/api' : ''}
+  },
+  '/identity': {
+      target: 'http://localhost:33656',
+      pathRewrite: {'^/identity' : ''}
+  },
+  '/events': {
+      target: 'http://localhost:46273',
+      pathRewrite: {'^/events' : ''}
+  }
+},
 ```
-An error has occurred.
-NetworkError when attempting to fetch resource.
-```
-And in the console:
-```
-Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.bitwarden.com/accounts/prelogin. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
-```
-This means that you are having a CORS header issue. This can be mitigated by using a CORS header changing extension in your browser such as [this one.](https://mybrowseraddon.com/access-control-allow-origin.html)
 
 ## Contribute
 

src/app/services/services.module.ts

@@ -157,18 +157,10 @@ export function initFactory(): Function {
                 'https://portal.bitwarden.com'; // window.location.origin + '/portal';
         }
         apiService.setUrls({
-            base: isDev ? null : window.location.origin,
-            api: isDev ? 'http://localhost:4000' : null,
-            identity: isDev ? 'http://localhost:33656' : null,
-            events: isDev ? 'http://localhost:46273' : null,
-
-            // Uncomment these (and comment out the above) if you want to target production
-            // servers for local development.
-
-            // base: null,
-            // api: 'https://api.bitwarden.com',
-            // identity: 'https://identity.bitwarden.com',
-            // events: 'https://events.bitwarden.com',
+            base: window.location.origin,
+            api: null,
+            identity: null,
+            events: null,
         });
         setTimeout(() => notificationsService.init(environmentService), 3000);
 

webpack.config.js

@@ -157,9 +157,46 @@ const devServer = {
         cert: fs.readFileSync('dev-server' + certSuffix + '.pem'),
     },
     // host: '192.168.1.9',
+    proxy: {
+        '/api': {
+            target: 'http://localhost:4000',
+            pathRewrite: {'^/api' : ''}
+        },
+        '/identity': {
+            target: 'http://localhost:33656',
+            pathRewrite: {'^/identity' : ''}
+        },
+        '/events': {
+            target: 'http://localhost:46273',
+            pathRewrite: {'^/events' : ''}
+        }
+    },
     hot: false,
 };
 
+if (ENV === "production") {
+    devServer.proxy = {
+        '/api': {
+            target: 'https://api.bitwarden.com',
+            pathRewrite: {'^/api' : ''},
+            secure: false,
+            changeOrigin: true
+        },
+        '/identity': {
+            target: 'https://identity.bitwarden.com',
+            pathRewrite: {'^/identity' : ''},
+            secure: false,
+            changeOrigin: true
+        },
+        '/events': {
+            target: 'https://events.bitwarden.com',
+            pathRewrite: {'^/events' : ''},
+            secure: false,
+            changeOrigin: true
+        }
+    };
+}
+
 const config = {
     mode: ENV,
     devtool: 'source-map',