Circumventing cross domain AJAX request with webpack server proxy setting

Question

How do we write a webpack configuration that allows us to perform a successful AJAX (get) request on a www.example.com/api/books domain/url which doesn't have CORS setup/enabled?

Based on this question.

The error I get from the domain is: No 'Access-Control-Allow-Origin' header is present on the requested resource.

What I attempted was adding this object to my webpack.base.conf.js file:

    proxy: {
       '/api': {
         target: 'http://www.example.com',
         secure: false
       }
     }

and adapted my http root url from:

Vue.http.options.root = 'http://www.example.com/api/'

to:

Vue.http.options.root = '/api/'

But it doesn't seem to be taken into account during my AJAX request:

GET http://localhost:8080/api/public/v1.0/lists/movies/in_theaters.json (Not Found)

"What I attempted was adding this object" … and then what happened? — Quentin, Oct 26 '16 at 17:06
@DaveNewton : I am trying to setup a Reverse proxy so that the servers thinks I am making the request from his domain.. or at least this is my understanding. — George Katsanos, Oct 26 '16 at 18:48
@Quentin : I removed the absolut url from my JS framework and do the request to api/.. but my proxy setting isn't used, so the request happens to http://localhost:8080/api... instead of http://www.example.com/api... — George Katsanos, Oct 26 '16 at 18:50
— That's the point. You are telling it that your proxy for `example.com` (a forbidden cross origin url) exists at `/api` (an allowed same origin url). — Quentin, Oct 26 '16 at 18:50
@Quentin ok that's probably not what I want :) I want to be able to do a cross-domain AJAX request by using a reverse proxy (but I dont get the mechanics of it..) — George Katsanos, Oct 26 '16 at 18:52
It is what you want… or rather, it's the client side half of it. You also need to put a reverse proxy at that URL. — Quentin, Oct 26 '16 at 18:53
@Quentin can you provide some example as an answer or something? — George Katsanos, Oct 26 '16 at 18:54

score 0 · Accepted Answer · answered Oct 27 '16 at 12:53

I found the problem.

My Webpack configuration was loading it's configuration via an index.js file which had all the module.exports = { } .

Over there I found a proxyTable empty object, in which I added:

dev: {
    env: require('./dev.env'),
    port: 8080,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
      }
    }
},

Then I did my AJAX requests to relative /api/whatever paths, and they're reverse proxied so the server accepts them.

Circumventing cross domain AJAX request with webpack server proxy setting

1 Answers1