symfony2 REST, AngularJs access-Control-Allow-Origin

Question

okay I am desperate. I am using FOSRestBundle and NelmioCorsBundle

I am still getting this error when I am trying to post data by angular from different server:

XMLHttpRequest cannot load 
http://IP/app_dev.php/api/v1/pages.json. 
No 'Access-    Control-Allow-Origin' header is present on the requested resource.
Origin      'http://127.0.0.1:9000' is therefore not allowed access.



Remote Address:IP:80
Request URL:http://IP/app_dev.php/api/v1/pages.json
Request Method:OPTIONS
Status Code:200 OK
Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,sk;q=0.6,cs;q=0.4
Access-Control-Request-Headers:accept, authorization, content-type
Access-Control-Request-Method:POST
Cache-Control:no-cache
Connection:keep-alive
Host:192.168.43.195
Origin:http://127.0.0.1:9000
Pragma:no-cache
Referer:http://127.0.0.1:9000/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36

Response Headers
Access-Control-Allow-Headers:X-Requested-With, content-type
Access-Control-Allow-Methods:POST, GET, PUT, DELETE, OPTIONS
Connection:Keep-Alive
Content-Length:573
Content-Type:text/html; charset=iso-8859-1
Date:Sun, 29 Jun 2014 18:07:54 GMT
Keep-Alive:timeout=5, max=100
Server:Apache/2.4.7 (Ubuntu)

I am trying to fix it all day long...

Currently I have:

# CORS OPTIONS (add this too)
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header always set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS"
    Header always set Access-Control-Allow-Headers "X-Requested-With, content-type"
</IfModule>

nelmio_cors:
    paths:
        '^/api/':
            allow_origin: ['*']
            allow_headers: ['X-Custom-Auth']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE','OPTIONS']
            max_age: 3600

Sending as:

            var data = new FormData;
            data.append('title', 'title');
            data.append('body', 'body');

            var request = $http({
                method: 'POST',
                url: TB+"/app_dev.php/api/v1/pages.json",
                headers: {
                    'Authorization': 'Bearer '+User.getAccessToken(),
                    'Content-Type': 'application/json'
                },
                data: data
            });

Any idea what's wrong with it please?

screenshot from 2014-06-29 20 20 01

Have you tried to change the nelmio configuration? From the nelmio website: "allow_origin and allow_headers can be set to * to accept any value, the allowed methods however have to be explicitly listed. paths must contain at least one item." So probably you have enabled just the X-Custom-Auth header? — erlangb
– erlangb, Commented Jul 11, 2014 at 14:00
Access-Control-Allow-Origin header really doesnt exist in server response — Alexey B.
– Alexey B., Commented Jul 14, 2014 at 9:24
You have to set the Access-Control-Allow-Origin header on the http://IP/app_dev.php/api/v1/pages.json server. You could do this in PHP or in an .htaccess. Also check in your developer tools of the preflight request has succeeded. — GuyT
– GuyT, Commented Jul 18, 2014 at 10:59

Filo · Accepted Answer · 2014-07-15 15:36:52Z

11

I had a similar problem with NelmioCorsBundle, I solved with this settings:

nelmio_cors:
    paths:
        '^/api/':
            allow_origin: ['*']
            allow_headers: ['*']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE','OPTIONS']
            max_age: 3600

answered Jul 15, 2014 at 15:36

Filo

2,8391 gold badge24 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vortex · Accepted Answer · 2014-07-18 10:13:27Z

if you are using chrome you should better get your mind of it working on a localhost ip. a common approach is to reverse proxy localhost into a custom local domain like your-domain.com (for this you would have to use a web server like apache or nginx), reverse proxy all connections to your 127.0.0.1:9000 ip, have an alias in /etc/hosts for 127.0.1.1 your-domain.com and just read the symfony documentation for adding custom headers to your ajax request. i am assuming here you have your ajax routes connected to a controller, a common example would be returning an array of headers as the third parameter

return new Response($json, 201, array('Access-Control-Allow-Origin' => '*', 'Content-Type' => 'application/json'));

i wouldn't complicate myself much and use 3rd party plugins that i have no control of. hope this helps, it's documented in the symfony cookbook (http://symfony.com/doc/current/book/http_fundamentals.html)

Denes P · Accepted Answer · 2017-01-23 00:31:20Z

1

allow_headers: '*' solved my issue:

nelmio_cors:
    paths:
        '^/api/':
            ...
            allow_headers: '*'
            ...

For me the error was logged as Unauthorized header content-type thrown by NelmioCorsBundle. (I'm Using standard Angular $resource + Symfony + NelmioCorsBundle setup)

NelmioCorsBundle by default only allows 'accept', 'accept-language', 'content-language' and 'origin' (see https://github.com/nelmio/NelmioCorsBundle/blob/1.4.0/EventListener/CorsListener.php#L32)

The error is thrown here: https://github.com/nelmio/NelmioCorsBundle/blob/1.4.0/EventListener/CorsListener.php#L158

--

PS: be aware of the security hole you might open with allowing any origin (*)

edited Jan 23, 2017 at 0:31

answered Jan 27, 2015 at 2:34

Denes P

4,0423 gold badges34 silver badges34 bronze badges

Comments

bluehallu · Accepted Answer · 2014-07-15 09:58:07Z

0

To access resources on a different server, that server has to declare the Access-Control-Allow-Origin header in it's response or it won't work because of browser security policies. It looks like you are not loading Nelmio in your Simfony app.

public function registerBundles()
{
    $bundles = array(
        ...
        new Nelmio\CorsBundle\NelmioCorsBundle(),
        ...
    );
    ...
}

answered Jul 15, 2014 at 9:58

bluehallu

10.3k9 gold badges47 silver badges64 bronze badges

Comments

Nätu · Accepted Answer · 2016-04-22 17:58:43Z

0

The most common mistake we do here is that we mismatch the method type in client side and server side. Make sure you have the method type as "POST" in both angularjs and symfony route..!!!

answered Apr 22, 2016 at 17:58

Nätu

3405 silver badges17 bronze badges

Comments

Lukas Lukac · Accepted Answer · 2014-07-30 21:52:51Z

-1

For me the problem was in network somehow...I think... I was creating a hotspot from mobile... then on laptop (connected to this hotspot) was running the server and from mobile I was trying to access this server.

Because few days later I just setup the router and no more issue with CORS.

answered Jul 30, 2014 at 21:52

Lukas Lukac

8,46610 gold badges69 silver badges75 bronze badges

Collectives™ on Stack Overflow

symfony2 REST, AngularJs access-Control-Allow-Origin

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related