axios patch not working in chrome

Question

I'm trying to update some articles on a drupal site using React axios. GET and POST requests work, but I can't get PATCH to work. Sending the PATCH request through Postman works just fine. I get the following error using axios:

Method PATCH is not allowed by Access-Control-Allow-Methods in preflight response.

What am I doing wrong?

Here's my code:

  editState(nid, value){
    let node = {
      "type":[{"target_id":"article","target_type":"node_type"}],
      "body":[{"value": value}]
    }
    let config = {
      headers: { 'Content-Type': 'application/json' }
    }
    axios.patch('http://localhost:8888/d8restapi/node/' + nid + '?_format=json',node,config)
    .then((success) => {
      console.log(success);
    }).catch((error) => {
      console.log(error);
    });
  }

Here are my OPTIONS request Headers:

• Request URL:http://localhost:8888/d8restapi/node/16?_format=json
• Request Method:OPTIONS
• Status Code:200 OK
• Remote Address:[::1]:8888
• Referrer Policy:no-referrer-when-downgrade
• Response Headers
• view source
• Allow:GET, POST, DELETE, PATCH
• Cache-Control:must-revalidate, no-cache, private
• Connection:Keep-Alive
• Content-language:en
• Content-Length:0
• Content-Type:application/json
• Date:Fri, 03 Nov 2017 21:08:24 GMT
• Expires:Sun, 19 Nov 1978 05:00:00 GMT
• Keep-Alive:timeout=5, max=98
• Server:Apache/2.2.31 (Unix) mod_wsgi/3.5 Python/2.7.12 PHP/7.0.10
• mod_ssl/2.2.31 OpenSSL/1.0.2h DAV/2 mod_fastcgi/2.4.6 mod_perl/2.0.9
• Perl/v5.24.0
• X-Content-Type-Options:nosniff
• X-Content-Type-Options:nosniff
• X-Frame-Options:SAMEORIGIN
• X-Generator:Drupal 8 (https://www.drupal.org)
• X-Powered-By:PHP/7.0.10
• X-UA-Compatible:IE=edge
• Request Headers
• view source
• Accept:/
• Accept-Encoding:gzip, deflate, br
• Accept-Language:en,en-US;q=0.8,sv;q=0.6,fi;q=0.4
• Access-Control-Request-Headers:content-type
• Access-Control-Request-Method:PATCH
• Connection:keep-alive
• Host:localhost:8888
• Origin:http://evil.com/
• Referer:http://localhost:3000/
• User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6)
• AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36
• Query String Parameters
• view source
• view URL encoded
• _format:json

Edit: Tested with Firefox and it works, but it doesn't work in Chrome! Have emptied caches and restarted and done a hard reload to no avail.

Edit 2: Problem solved. I installed another CORS plugin in Chrome. The following works in case anyone is facing the same problem with other CORS plugins:

https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc

Answer 1

I've similar experience on serverless and reactjs. First I thought the issue is on serverless CORS configuration but it's actually I forgot to put

e.preventDefault()

when submitting the form. As a result, the request is cancelled because the page is loaded although the response is not returned yet.

Answer 2

I've experienced exactly the same thing. Like you, just the combination of react, axios and chrome didn't work.

I solved the issue by changing my CORS chrome extension to this one: https://chrome.google.com/webstore/detail/access-control-allow-cred/hmcjjmkppmkpobeokkhgkecjlaobjldi