title: Localhost has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status
body: <p>So I am working on my first Vue project and I came across a problem that I can't seem to solve.</p>
  <p>I am trying to perform CRUD operations with Vue and my backend RESTful API service, but I keep getting this error:</p>
  <pre><code>Access to XMLHttpRequest at 'http://localhost:8080/parties/3' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
  </code></pre>
  <p>When i was searching for the answer I came across this:</p>
  <pre><code>header := w.Header()
  header.Add(&quot;Access-Control-Allow-Origin&quot;, &quot;*&quot;)
  header.Add(&quot;Access-Control-Allow-Methods&quot;, &quot;DELETE, POST, GET, OPTIONS&quot;)
  header.Add(&quot;Access-Control-Allow-Headers&quot;, &quot;Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With&quot;)
  </code></pre>
  <p>And I believe this is in the right direction of the answer, but I don't really know where to put in my code (I think it probably will have to go into the script of the Vue page, but I am not really sure)</p>
  <p><strong>This is my Vue page:</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div v-if=&quot;currentParty&quot; class=&quot;edit-form&quot;&gt;
      &lt;h4&gt;Party&lt;/h4&gt;
      &lt;form&gt;
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;name&quot;&gt;Name&lt;/label&gt;
          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;name&quot;
                 v-model=&quot;currentParty.name&quot;
          /&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;description&quot;&gt;Description&lt;/label&gt;
          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;description&quot;
                 v-model=&quot;currentParty.description&quot;
          /&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label&gt;&lt;strong&gt;Status:&lt;/strong&gt;&lt;/label&gt;
          {{ currentParty.isPartyNational ? &quot;isPartyNational&quot; : &quot;Pending&quot; }}
        &lt;/div&gt;
      &lt;/form&gt;
  
      &lt;button class=&quot;badge badge-primary mr-2&quot;
              v-if=&quot;currentParty.isPartyNational&quot;
              @click=&quot;updatePublished(false)&quot;
      &gt;
        UnPublish
      &lt;/button&gt;
      &lt;button v-else class=&quot;badge badge-primary mr-2&quot;
              @click=&quot;updatePublished(true)&quot;
      &gt;
        Publish
      &lt;/button&gt;
  
      &lt;button class=&quot;badge badge-danger mr-2&quot;
              @click=&quot;deleteParty&quot;
      &gt;
        Delete
      &lt;/button&gt;
  
      &lt;button type=&quot;submit&quot; class=&quot;badge badge-success&quot;
              @click=&quot;updateParty&quot;
      &gt;
        Update
      &lt;/button&gt;
      &lt;p&gt;{{ message }}&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div v-else&gt;
      &lt;br /&gt;
      &lt;p&gt;Please click on a Party...&lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import PartyDataService from &quot;@/services/PartyDataService&quot;;
  
  export default {
    name: &quot;Party&quot;,
    data() {
      return {
        currentParty: null,
        message: ''
      };
    },
    methods: {
      getParty(id) {
        PartyDataService.get(id)
            .then(response =&gt; {
              this.currentParty = response.data;
              console.log(response.data);
            })
            .catch(e =&gt; {
              console.log(e);
            });
      },
      updatePublished(status) {
        var data = {
          id: this.currentParty.id,
          name: this.currentParty.name,
          description: this.currentParty.description,
          published: status
        };
  
        PartyDataService.update(this.currentParty.id, data)
            .then(response =&gt; {
              this.currentParty.published = status;
              console.log(response.data);
            })
            .catch(e =&gt; {
              console.log(e);
            });
      },
      updateParty() {
        PartyDataService.update(this.currentParty.id, this.currentParty)
            .then(response =&gt; {
              console.log(response.data);
              this.message = 'The Party was updated successfully!';
            })
            .catch(e =&gt; {
              console.log(e);
            });
      },
      deleteParty() {
        PartyDataService.delete(this.currentParty.id)
            .then(response =&gt; {
              console.log(response.data);
              this.$router.push({ name: &quot;parties&quot; });
            })
            .catch(e =&gt; {
              console.log(e);
            });
      }
    },
    mounted() {
      this.message = '';
      this.getParty(this.$route.params.id);
    }
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  .edit-form {
    max-width: 300px;
    margin: auto;
  }
  &lt;/style&gt;
  </code></pre>
  <p><strong>And this is my PartyDataService in case you need it:</strong></p>
  <pre><code>import http from &quot;../http-common&quot;;
  
  class PartyDataService {
      getAll() {
          return http.get(&quot;/parties&quot;);
      }
  
      get(id) {
          return http.get(`/parties/${id}`);
      }
  
      create(data) {
          return http.post(&quot;/parties/&quot;, data);
      }
  
      update(id, data) {
          return http.put(`/parties/${id}`, data);
      }
  
      delete(id) {
          return http.delete(`/parties/${id}`);
      }
  
      deleteAll() {
          return http.delete(`/parties`);
      }
      findByTitle(title){
          return http.get(`/tutorials?title=${title}`)
      }
  }
  
  export default new PartyDataService();
  </code></pre>
  <p>After some more research I think this file is important to upload:
  <strong>My http-common.js:</strong></p>
  <pre><code>import axios from &quot;axios&quot;;
  
  export default axios.create({
      baseURL: &quot;http://localhost:8080/&quot;,
      headers: {
          &quot;Content-type&quot;: &quot;application/json&quot;,
  
      }
  
  });
  </code></pre>
  <p>Adding this to the code above in headers:</p>
  <pre><code>'Access-Control-Allow-Origin' : '*',
   &quot;Access-Control-Allow-Methods&quot;:&quot;GET,PUT,POST,DELETE,PATCH,OPTIONS&quot;
  </code></pre>
  <p>Does not work. It only makes another working get operation on another Vue page in my project not work anymore.</p>
  <p><strong>Extra info:</strong></p>
  <ul>
  <li>I am already using an access-control-allow-origin extension (in case it is information you need)</li>
  <li>My backend RESTful API is made with Spring boot (gradle)</li>
  <li>I am just learning about Vue and stuff, so could you explain your answer as simple as possible?</li>
  </ul>
  <p>If you need extra files or information you can ask me and I will add it into the post.</p>
  <p>Thanks in advance!</p>