title: Axios/vue pass headers to allow cross origin for certain domain
body: <p>I am using vue and axios and I am trying to make a global form request. Here's the problem so far everything is good however I do not know exactly where to setup cross-origin in that code. My back end has it definetely enabled and I just need to set it axios now.</p>
  
  <p>Here's form:</p>
  
  <pre><code>  data() {
      return {
        form: new Form({
          name: '',
          email: '',
          password: '',
          password_confirm: ''
        })
      }
    },
    methods: {
      onSubmit() {
        this.form.post('http://webuilder.app/auth/register')
          .then(response =&gt; alert('Wahoo!'));
      }
    }
  
  form class:
  
  import Errors from './error.js';
  
  class Form {
    /**
     * Create a new Form instance.
     *
     * @param {object} data
     */
    constructor(data) {
      this.originalData = data;
      console.log(data);
      for (let field in data) {
        this[field] = data[field];
      }
  
      this.errors = new Errors();
    }
  
  
    /**
     * Fetch all relevant data for the form.
     */
    data() {
      let data = {};
  
      for (let property in this.originalData) {
        data[property] = this[property];
      }
      console.log(data);
      return data;
    }
  
  
    /**
     * Reset the form fields.
     */
    reset() {
      for (let field in this.originalData) {
        this[field] = '';
      }
  
      this.errors.clear();
    }
  
  
    /**
     * Send a POST request to the given URL.
     * .
     * @param {string} url
     */
    post(url) {
      console.log(url);
      return this.submit('post', url);
    }
  
  
    /**
     * Send a PUT request to the given URL.
     * .
     * @param {string} url
     */
    put(url) {
      return this.submit('put', url);
    }
  
  
    /**
     * Send a PATCH request to the given URL.
     * .
     * @param {string} url
     */
    patch(url) {
      return this.submit('patch', url);
    }
  
  
    /**
     * Send a DELETE request to the given URL.
     * .
     * @param {string} url
     */
    delete(url) {
      return this.submit('delete', url);
    }
  
  
    /**
     * Submit the form.
     *
     * @param {string} requestType
     * @param {string} url
     */
    submit(requestType, url) {
      return new Promise((resolve, reject) =&gt; {
        console.log(this.data());
        console.log(url);
        console.log(requestType);
        axios.post(url, this.data())
          .then(response =&gt; {
            this.onSuccess(response.data);
            console.log(response);
            resolve(response.data);
          })
          .catch(error =&gt; {
            this.onFail(error);
            console.log(error);
            reject(error);
          });
      });
    }
  
  
    /**
     * Handle a successful form submission.
     *
     * @param {object} data
     */
    onSuccess(data) {
      alert(data.message); // temporary
  
      this.reset();
    }
  
  
    /**
     * Handle a failed form submission.
     *
     * @param {object} errors
     */
    onFail(errors) {
      this.errors.record(errors);
    }
  }
  
  export default Form;
  </code></pre>
  
  <p>global axios settings:</p>
  
  <p>window.axios = Axios;</p>
  
  <pre><code>window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  window.axios.defaults.headers.common['Access-Control-Allow-Origin'] = 'http://webuilder.app'
  window.axios.defaults.headers.common['Access-Control-Request-Method'] = '*'
  </code></pre>
  
  <p>Any ideas why it is still being rejected and how to fix this issue?</p>