Vue.js + Axios + CORS

vue-axios-cors.md

Proxy requests using Webpack dev server to avoid cors in development mode.

In your webpack.config file add:

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://my-target.com',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

The above example will proxy the request axios.post(/api/posts/1 ... . . . . to https://my-target.com/posts/1

The above Git example, u need to change like this in your request:

axios.get('/api/a/threads.json', {
	headers: {
           //  if u have some headers like this
	   //  'Authorization': ' Basic //////some values'
	},
	}).then(function (response) {
		console.log('response is : ' + response.data);
	}).catch(function (error) {
		if (error.response) {
		  console.log(error.response.headers);
		} 
		else if (error.request) {
	      console.log(error.request);
		} 
		else {
		  console.log(error.message);
		}
	console.log(error.config);
});

In webpack.config file ........

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://a.4cdn.org',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

the modified webpack config proxy will change your request like this..

u can see this in chrome dev tool REQUEST HEADERS
https://a.4cdn.org/a/threads.json 

u can use multiple paths in devServer proxy like this In webpack.config file ........

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://a.4cdn.org',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    },
    "/login": {
    "target": 'https://github.com', // for example
    "pathRewrite": { '^/login': '' },
    "changeOrigin": true,
    "secure": false
    },
    "/post": {
    "target": 'https://facebook.com', // for example
    "pathRewrite": { '^/post': '' },
    "changeOrigin": true
    }
  }
}

Use if u need

"changeOrigin": true,
"secure": false

References:

• https://cli.vuejs.org/config/#devserver-proxy
• http://vuejs-templates.github.io/webpack/proxy.html
• axios/axios#853 (comment)
• https://stackoverflow.com/questions/40315451/proxy-requests-to-a-separate-backend-server-with-vue-cli?answertab=active#tab-top

It is really helpful! Thanks.

can't get it working... does the fact that I'm using different ports make any difference?

Is there a solution to call the proxy target url directly on api request not in the devServer configuration ? I'd like to have a dynamic proxy.

Wow, this actually works! Every other example I've followed has failed. I think the key that the other examples were missing is:

"pathRewrite": { '^/api': '' },

This solution worked wonderfully, straightforward, concise and self explanatory, great!!!