title: Laravel+Nuxt CORS getting blocked in production environment
body: <p>Recently I've moved my Laravel+Nuxt project from local to remote server. Laravel is running on &quot;http://laravelexample.com&quot; domain and Nuxt is running on another domain &quot;http://nuxtexample.com&quot;. I've had no CORS errors while running on localhost, all requests/pages work as expected, but when trying it out in server environment only about half of the API requests work, others keep throwing:</p>
  <p><strong>Access to XMLHttpRequest at 'http://laravelexample.com/api/XXXXX/' from origin 'http://nuxtexample.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.</strong></p>
  <p>Laravel .htaccess:</p>
  <pre><code>&lt;IfModule mod_headers.c&gt;
      Header set Access-Control-Allow-Origin &quot;*&quot;
  &lt;/IfModule&gt;
  &lt;IfModule mod_rewrite.c&gt;
  php_value  upload_max_filesize  10M
  
      &lt;IfModule mod_negotiation.c&gt;
          Options -MultiViews -Indexes
      &lt;/IfModule&gt;
  
      RewriteEngine On
     
      # Handle Authorization Header
      RewriteCond %{HTTP:Authorization} .
      RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
  
      # Redirect Trailing Slashes If Not A Folder...
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteCond %{REQUEST_URI} (.+)/$
      RewriteRule ^ %1 [L,R=301]
  
      # Send Requests To Front Controller...
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteRule ^ index.php [L]
  &lt;/IfModule&gt;
  </code></pre>
  <p>Nuxt .htaccess:</p>
  <pre><code>&lt;IfModule mod_headers.c&gt;
      Header set Access-Control-Allow-Origin &quot;*&quot;
  &lt;/IfModule&gt;
  </code></pre>
  <p>nuxt.config.js:</p>
  <pre><code>import colors from 'vuetify/es5/util/colors'
  export default {
    // Global page headers: https://go.nuxtjs.dev/config-head
    mode: 'universal',
    head: {
      titleTemplate: '[EB] - %s',
      title: 'X',
      htmlAttrs: {
        lang: 'en'
      },
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: '' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        {
          rel: &quot;stylesheet&quot;,
          href:
            &quot;https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css&quot;
        }
      ],
      script: [
        {
          src: &quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot;,
          type: &quot;text/javascript&quot;
        },
        {
          src:
            &quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js&quot;,
          type: &quot;text/javascript&quot;
        },
        {
          src:
            &quot;https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js&quot;,
          type: &quot;text/javascript&quot;
        }
      ],
    },
  
    loading: { color: '#fff' },
  
    // Global CSS: https://go.nuxtjs.dev/config-css
    css: [
    ],
  
    router: {
      middleware: [&quot;clearValidationErrors&quot;]
    },
  
    // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
    plugins: [
      './plugins/mixins/user.js',
      './plugins/axios.js',
      './plugins/mixins/validation.js',
    ],
  
    // Auto import components: https://go.nuxtjs.dev/config-components
    components: true,
  
    // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
    buildModules: [
      // https://go.nuxtjs.dev/vuetify
      '@nuxtjs/vuetify',
    ],
  
    moment: {
      defaultTimezone: 'America/Chicago'
    },
  
    // Modules: https://go.nuxtjs.dev/config-modules
    modules: [
      // https://go.nuxtjs.dev/axios
      '@nuxtjs/axios',
      '@nuxtjs/auth',
      '@nuxtjs/proxy',
    ],
  
    axios: {
     // Do away with the baseUrl when using proxy
      baseUrl: 'http://laravelexample.com/api/',
    },
  
  
  
    auth: {
          redirect: {
          login: &quot;/login&quot;,
          logout: false
      },
      strategies: {
        local: {
          endpoints: {
            login: {
              url: 'auth/login',
              method: 'post',
              propertyName: &quot;meta.token&quot;
            },
            user: {
              url: '/auth/user-profile',
              method: 'get',
              propertyName: 'data'
            },
            logout: {
              url: 'auth/logout',
              method: 'post'
            }
          }
        }
      }
    },
  
    // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
    vuetify: {
      customVariables: ['~/assets/variables.scss'],
      theme: {
        dark: true,
        themes: {
          dark: {
            primary: colors.teal.lighten1,
            accent: colors.grey.darken3,
            secondary: colors.amber.darken3,
            info: colors.teal.lighten1,
            warning: colors.amber.base,
            error: colors.deepOrange.accent4,
            success: colors.green.accent3
          }
        }
      }
    },
  
    // Build Configuration: https://go.nuxtjs.dev/config-build
    build: {
      extend (config, ctx) {
      }
    }
  }
  </code></pre>
  <p>Example of $axios call which causes CORS error:</p>
  <pre><code>getVendors()
  {
    this.$axios.get(`/vendors`).then(res =&gt; {
      this.vendors = res.data.data;
    })
  </code></pre>
  <p>Example of $axios call which works on the server and does not cause CORS error:</p>
  <pre><code>    getBreakdowns() {
        let user_company = this.$store.getters['company/getCompany']
        this.$axios.get(`/breakdowns/${user_company}`).then(res =&gt; {
          this.breakdowns = res.data.data;
        })
      },
  },
  </code></pre>
  <p>Google Chrome network tab shows this, when accessing the path with CORS error:
  <a href="https://i.stack.imgur.com/wrkcX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wrkcX.png" alt="enter image description here" /></a></p>
  <p>I've already tried various different proxy setups (but it still only works on localhost, but not on the server). The server is using OpenLiteSpeed if that changes something. But nothing seems to work and I keep seeing the same CORS error, any chance someone has faced something like this and managed to come up with some kind of a fix?</p>
  <p>Any help or ideas will be greatly appreciated, since this has really gotten extremely frustrating.</p>