GET call failing - Access-Control-Allow-Origin

[brightworks]

I'm trying to make a GET call to an external API that I can't adjust the settings on. It works great in POSTMAN, but when I do it through the browser I get the Access-Control-Allow-Origin error. Full error is below:

"XMLHttpRequest cannot load https://api.com/parameters/etc&etc=etc. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 400."

I see this is a fairly common issue, and the consensus seems to be to "adjust the server settings", but unfortunately I can't do this here. Is there another solution?

[HectorNJ]

If you can use api for any origins then... mode: 'no-cors'

[conero]

I got same issue too, how to do that, but? In my server I already add 'Access-Control-Allow-Origin', and it doesn't work yet. It made me hurt, bro!!

[Gagydzer]

Conero, '*" isn't correct value for this header, you know. try it with 'http://127.0.0.0:8080' or 'localhost'.

[Hyrules]

Gagydzer is corrent allowing origins from any source is not correct and could be a security issue. I have seen chrome refusing to communicate with some api having * as that header value. I have also seen this error when I had some errors in my php code. Since the page you try to contact has error it might not send 'Access-Control-Allow-Origin' because php returns a default page with the errors. I don't say this is your case but I suggest try to contact your api with a third party plugin for chrome like postman.

[vikegart]

Try to use jsop
this.$http.jsonp('http://yourURL/').then(response => {
// get body data
console.log(response.body)
}, response => { // error callback });

[stevenkitter]

i solved this issue, because i use "Vue.http.interceptors.push" before. then i use "Vue.http.interceptors.before" i solved this problem.

[karlitos]

Hello @stevenkitter,

would you be so kind and provide an minimal code example ? I am really interested on this.

[VitorBrangioni]

Solution for Express:

var express = require('express');
var app = express();

app.use(function(req, res, next) {
	res.header("Access-Control-Allow-Origin", "*");
	res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
	res.header('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');
	next();
  });

Or use this headers config in your app.

[avazquez0191]

Hello, I have the same problem with my application, I am working in development mode with an express server published in [localhost: 3001] and my client goes in [localhost: 8080], I am using vue-resource for requests and the interceptor for Authentication headers.
My proxy configuration in vue.config.js file looks like this:

module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3001', secure: false, changeOrigin: false } } } };

All the requests I make return the same to me:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080'

To verify that my server was functioning correctly, I created an angular application with a simple request and proxified as is, and it worked perfectly, so the question is why does this happen to me when I use vue-resource? It is truly frustrating.

I would appreciate if someone could explain to me why from Postman and Angular I can access the services without problems and from Vue using vue-resource no.

Thanks.