AngularJS and Symfony 3 CORS issue with Chrome

Question

I've been struggling this last week with a bug on my backend and frontend.

I've made a REST API (php/symfony) to manage books and authors. I had an issue on cross-origin requests on the DELETE and it has been fixed since. And now I have an issue on the PUT (POST too) and this ONLY on Chrome (v62.0.3202.94). Tried my API on postman and it's working just fine, tested on Edge and Firefox too. I've tried to use the Allow-Control-Allow-Origin: * plugin for Chrome and didn't work either. Everytime i got the same error :

Request URL:http://127.0.0.1/whereIsMyBook-symfony/web/app_dev.php/updateAuthor/7
Request Method:OPTIONS
Status Code:405 Method Not Allowed
Remote Address:127.0.0.1:80
Referrer Policy:no-referrer-when-downgrade
Response Headers
view source
Access-Control-Allow-Origin:*
Allow:PUT
Cache-Control:no-cache, private
Connection:Keep-Alive
Content-Type:text/html; charset=UTF-8
Date:Tue, 05 Dec 2017 18:05:06 GMT
Keep-Alive:timeout=5, max=99
Server:Apache/2.4.27 (Win64) PHP/5.6.31
Transfer-Encoding:chunked
X-Debug-Token:e8abc7
X-Debug-Token-Link:http://127.0.0.1/whereIsMyBook-symfony/web/app_dev.php/_profiler/e8abc7
X-Powered-By:PHP/5.6.31
Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
Access-Control-Request-Headers:access-control-allow-origin,content-type
Access-Control-Request-Method:OPTIONS
Connection:keep-alive
Host:127.0.0.1
Origin:http://localhost:8000
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36

And an exception is thrown by my backend :

angular.js:12265 OPTIONS http://127.0.0.1/whereIsMyBook-symfony/web/app_dev.php/updateAuthor/7 net::ERR_ABORTED

I've tried to modify my app.config.js and adding the lines below :

['$httpProvider', function ($httpProvider) {
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    $httpProvider.defaults.headers.post['Accept'] = 'application/json, text/javascript';
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
    $httpProvider.defaults.useXDomain = true;
}]

I think i have an issue with the pre-flight requests but can't seem to get rid of them correctly. I've browsed a lot of pages and still can't find why it's not working. As Leia once said : "You're my last hope".

Here's my method (in the service) :

this.editAuthor= function(formData, index){
         return $http({
            method : 'PUT',
            url : baseUrl + '/updateAuthor/' + index,
            data : formData,
            headers: {
                'Access-Control-Allow-Origin' : '*',
                'Content-Type': 'application/json'
            }
        })
    }

My API is hosted on wamp on localhost with the apache headers_module activated.

Thank you for your kind help

You need to add the CORS header on the API because the API and frontend are running on different ports. This bundle should allow you to do that: github.com/nelmio/NelmioCorsBundle If you are already using this bundle then check the allow_methods: ['POST','GET','DELETE','PUT'] config setting — madebydavid
– madebydavid, Commented Dec 5, 2017 at 18:35
Hey Justine, could you accept my answer ? That is my reward to help you :) — Mcsky
– Mcsky, Commented Dec 7, 2017 at 8:30

Mcsky · Accepted Answer · 2019-07-13 16:20:06Z

1

You are using angular, this framework use HTTP OPTIONS request to ask the server the authorized HTTP verbs in your backend application.

We can see some usefull informations to debug your error from the server's response

Status Code:405 Method Not Allowed, this HTTP error code is returned by the backend (Symfony here) when he can't handle the request on this route
Allow:PUT, The server return the verb which it can handle

After installation of NelmioCorsBundle add this configuration to your app/config/config.yml file.

nelmio_cors:
        paths:
            '^/api/':
                allow_origin: ['*']
                allow_headers: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept', 'Authorization']
                allow_methods: ['POST', 'PUT', 'GET', 'DELETE', 'OPTIONS']
                max_age: 0

I advice you to define a base route to your symfony's api application, like /api and not just only /update

Let me know if something isn't clear :)

edited Jul 13, 2019 at 16:20

answered Dec 6, 2017 at 8:06

Mcsky

1,4451 gold badge11 silver badges21 bronze badges

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

1 Comment

Mcsky Over a year ago

No problem, can you validate the answer ? :) @justine

Naoufel Raouine · Accepted Answer · 2019-07-02 11:28:02Z

0

You have to add to your controller API in Symfony this code:

        $jsonContent='{"products":[{"id":1,"nom":"aza","prix":5}]}';
        $response = new Response($jsonContent);
        // $response->headers->set('Content-Type', 'application/json');
        $response->headers->set('Access-Control-Allow-Origin', '*');
        $response->headers->set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, 
        PUT, PATCH, DELETE');
        $response->headers->set('Access-Control-Allow-Headers' , 'Content-Type');

        return $response;

answered Jul 2, 2019 at 11:28

Naoufel Raouine

11 bronze badge

Collectives™ on Stack Overflow

AngularJS and Symfony 3 CORS issue with Chrome

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related