1

I am facing a strange issue. I have a java spring app running on the PORT 8080 and Angular app running on port 3000. While making the request its returning status 200 and can find response in the browser network tab, but console is throwing error XMLHttpRequest cannot load 'http://localhost:8080/apiname'. No 'Access-Control-Allow-Origin' header is present on the requested resource. origin 'http://localhost:3000/#/home' is therefore not allowed access. Is there any way to get this working without making any changes on the server side. Any help is appreciated

ArunBabuVijayanath
  • 470
  • 4
  • 14
  • No. You can't make a cross-origin request without the server allowing it. – user94559 Jun 18 '17 at 02:43
  • I am able to use curl or for that matter POSTman as well, if server is not allowing the request preview should also not appear right? @smarx – ArunBabuVijayanath Jun 18 '17 at 02:45
  • 1
    No, that's not how CORS works. CORS is a restriction implemented by the browser. It won't allow your JavaScript code access to the response unless the server sends the appropriate headers allowing it. – user94559 Jun 18 '17 at 02:48
  • 1
    Hi, Please refer the [how-does-access-control-allow-origin-header-work](https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work) – Maher Jun 18 '17 at 02:59

3 Answers3

1

It sounds like you have one service on your machine trying to talk to another, and for whichever reason they don't identify as being in the same domain. Usually you will have to add a cross domain policy for domains that aren't within the same environment.

The Access-Control-Allow-Origin header is a CORS standard that instructs you who can send communication over cross domain policies.

You can only host one website on port 80, and it wouldn't quite make sense to have two sites. One SSL(443) and one HTTP(80) so this may be why it's in effect, are because of your ports.

For the simple answer, add the header into your server side response and be sure to add that domain and port, to your cross domain policy.

I'd encourage you also to try to look at why you're having to perform these communications. You could put the two services into one site and remove the need. That's your easiest answer for a non-server change.

Otherwise, you will have to add it. It's a security protocol. There are steps to remove it, but that would open you up to a myriad of security vulnerabilities.

Use the following link to read more, and you can use * as opposed to disabling for another approach.

https://enable-cors.org/server.html

Access-Control-Allow-Origin: *

The above header will allow all cross domain policies, implemented server side.

Jacob Gaiski
  • 516
  • 3
  • 10
0

You can enable it in firebox by adding extension

https://addons.mozilla.org/en-US/firefox/addon/cross-domain-cors/

Arun
  • 450
  • 3
  • 8
-1

You must enable CORS headers server-side or use a proxy (own, or a simple service like crossorigin.me for development purposes) that serves proper CORS headers.

In order to enable CORS in Express.js app, please see cors middleware - for simple use cases, a single line of code is enough - app.use(cors()).

For desktop or in-app usage, you may ignore CORS headers if you like as you have greater control over HTTP client.

Przemysław Zalewski
  • 3,836
  • 1
  • 23
  • 23