title: Axios DELETE request failes only in the browser with 403 "Invalid CORS request" as response
body: <ol>
  <li><p>I am using vue in the front end and spring boot in the back end .  </p></li>
  <li><p>I have used axios to make server call from the vue code . </p></li>
  <li><p>Every thing was fine  with GET ,POST requests.  </p></li>
  <li><p>When i try to make DELETE request it failed with <code>403</code> status and the error response is <code>Invalid CROS request</code>.  </p></li>
  <li><p>But the same <code>DELETE</code> request works In POSTMAN </p></li>
  </ol>
  
  <p>I have tried the following solution mentioned in the another post and it didn't help me 
  1. added withCredentials: true in the request header </p>
  
  <ol start="2">
  <li>added headers: {'X-Requested-With': 'XMLHttpRequest','X-CSRFToken': 'your token here'}</li>
  </ol>
  
  <p>3.added @CrossOrigin annotation in the <code>DELETE</code> api</p>
  
  <p>This is how i created  axios instance </p>
  
  <pre><code>const token = localStorage.token;
  
  const instance = axios.create({
    baseURL: "/",
    headers: {
      Authorization: token
    }
  });
  </code></pre>
  
  <p>making request as below </p>
  
  <pre><code>instance.delete(`/user/${username}`);
  </code></pre>
  
  <p>It throws <code>403</code> <code>Invalid CROS Request</code> as response and its not hitting the server api too</p>