0

I'm trying to make a request with Angular like this:

(function () {
    'use strict';

    angular.module('app')
        .service('requestService',requestService);

    function requestService($http) {
        this.post = function(url, data) {
            return $http({
                'method': 'POST',
                'url': url,
                'data': $.param(
                    data
                )
            });
        }
    }
})();

I receive the error in my console:

XMLHttpRequest cannot load http://lsupport.dev/api/v1/login. 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:3000' is therefore not allowed access.

My http://localhost:3000 is build with Gulp. I've already searched a lot on the web, but I cannot find a solution.

halfer
  • 19,824
  • 17
  • 99
  • 186
Jamie
  • 10,302
  • 32
  • 103
  • 186
  • 1
    what is the url of the browser? you must be on the same domain (on your case localhost:3000). if you are not you have to add the header Access-Control-Allow-Origin to the response on your server – JavierFromMadrid Apr 11 '16 at 15:40
  • The first thing we need to know to be able to answer this is whether or not the 3rd party url supports CORS at all. It may be that it only supports basic cors requests, meaning requests that don't need a preflight. If that's the case, you simply need to change the contentType back to the default value. If it doesn't support cors at all, and it doesn't support JSONP (which it shouldn't since this is a POST request,) there's no hope for making this request with angular. – Kevin B Apr 11 '16 at 16:11

2 Answers2

0

You need to enable CORS on the server (remote) to permit the code to execute requests with a different domain.

CORS-Wikipedia

thegio
  • 1,233
  • 7
  • 27
  • by "the" server, you of course mean the 3rd party server, `http://lsupport.dev/api/v1/login`, not the local server. – Kevin B Apr 11 '16 at 16:07
  • Just wanted to make it clear, because so many of the people who have this problem assume that they have to add this header to their own server. – Kevin B Apr 11 '16 at 16:09
  • no, CORS is enabled server side (remote), even if I don really understand the domain that you are trying to reach. Is it in your local LAN? – thegio Apr 11 '16 at 16:10
  • It's running locally – Jamie Apr 11 '16 at 16:12
  • okay, the go on the lsupport.dev server and enable the CORS. even if running locally the server has a different domain. the alternative (if locally is on you machine) is to change the domain to localhost instead of lsupport.dev – thegio Apr 11 '16 at 16:17
0

You must need access of the server in which your making the request OR owner of the server need to enable it.

Please check the following post in more details.

Header set Access-Control-Allow-Origin in .htaccess doesn't work

Access-Control-Allow-Origin Multiple Origin Domains?

Homestead is Nginx server Please follow the steps. To solve it.

Handling CORS with Nginx

Access Control Origin nothing to do with AngularJS, It server end issue to respond to the specific request there is different configuration based on your server type like Apache, Nginx.

Community
  • 1
  • 1
codeCraft
  • 62
  • 5
  • let make clear here. As I can understand. 1) Your making the request from localhost to http://lsupport.dev/api/v1/login 2) Do you have access of lsupport.dev? on lsupport.dev they need to add .htacess file on the server. **Only the server response to valid request, for which they enable cross site origin** – codeCraft Apr 11 '16 at 16:08
  • Yes I have acces I use homestead vagrant – Jamie Apr 11 '16 at 16:12
  • 1) Which programming language your using? 2) Are you using the PHP and LARAVEL? If your using PHP, Add in index.php at the top. ** – codeCraft Apr 11 '16 at 16:16
  • Homestead is **Nginx** Please follow the steps. **http://blog.osteel.me/posts/2015/07/19/handling-cors-with-nginx.html** – codeCraft Apr 11 '16 at 16:20