Proxy CORS requests with grunt to localhost

Question

My app (http://localhost:8099) is doing some CORS requests to https://api.parse.com/ that I want to proxy to my local api http://localhost:8077 for testing purposes. Can this be achived with grunt-connect-proxy?

Here's my config of grunt-connect-proxy that does not work like I expect.

connect: {
      dev: {
        options: {
          port: 8099,
          hostname: 'localhost',
          base: 'build/',
          livereload: false,
          keepalive: true,
          middleware: function (connect, options) {
            var proxy = require('grunt-connect-proxy/lib/utils').proxyRequest;
            return [
              // Include the proxy first
              proxy,
              // Serve static files.
              connect.static('build/')
            ];
          }
        }
      },
      proxies: [
      {
        context: ['api/'], //same domain api requests, proxy works fine!
        host: 'localhost',
        port: 8077
      },
      {
        context: ['api.parse.com/'], //cors, proxy is not working
        host: 'localhost',
        port: 8077,
        changeOrigin: true
      }]

    }

→ grunt serve
Proxy created for: api/ to localhost:8077
Proxy created for: api.parse.com/ to localhost:8077

So, basically proxying is works for api/ requests (same domain), but is completely ignored for cors requests to api.parse.com/. Ideas?

Answer 1

When you will make request to api.parse.com, browser will connect to actual parse.com server. grunt-connect-proxy comes into picture only when requests are made to application server which is localhost:8099 in your case.

Everything else other localhost:8099 is remote/cross domain for your application (even localhost:8077) and you can use grunt-connect-proxy to connect to these servers in the server side, while on client side you will still make requests to your own server.

Which server to connect to when proxying is configured using the context.

proxies: [
      {
        context: ['api/'],
        host: 'localhost',
        port: 8077
      },
      {
        context: ['parse/'], 
        host: 'api.parse.com'
      }]

So, considering above configurations

localhost:8099/api --> Will got to localhost:8077

and

localhost:8099/parse --> will go to api.parse.com