I am using nuxt to build a client that fetches data from parse server. In my index.vue I am sending request to the parse server inside asyncData. I am on development server serving at localhost:3000.

Here is a part of my index.vue file

export default {
    asyncData() {
        let user = new Parse.User()

        user.set('email', '[email protected]')
        user.set('username', 'sample_user')
        user.set('created_at', '2018-04-04')
        user.set('updated_at', '2018-04-04')
        return user
          .save()
          .then(response => console.log(response))
       }
    }
}

I am getting this error on my Chrome browser's (I am using Chrome by the way) console

POST 410 Access to XMLHttpRequest at '' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I tried adding cors as middleware to server/index.js as follows

const cors = require('cors')
app.use(cors())

But nothing changed. How can I overe the 'ever-present' Access-Control-Allow-Origin error.

UPDATE After @Nicolas Pennec's answer

I tried creating a sign in with google feature and changed my nuxt.config.js configuration and added the following:

auth: {
    strategies: {
      google: {
        client_id:
          '****.apps.googleusercontent'
      }
    },
    redirect: {
      login: '/login',
      logout: '/',
      callback: '/login',
      home: '/'
    }
  }

It authenticates with google properly and redirects back to my login route. It encounters error and shows the following on the console:

OPTIONS  403
Access to XMLHttpRequest at '' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
[ERROR] [AUTH] Error: Network Error

I am using nuxt to build a client that fetches data from parse server. In my index.vue I am sending request to the parse server inside asyncData. I am on development server serving at localhost:3000.

Here is a part of my index.vue file

export default {
    asyncData() {
        let user = new Parse.User()

        user.set('email', '[email protected]')
        user.set('username', 'sample_user')
        user.set('created_at', '2018-04-04')
        user.set('updated_at', '2018-04-04')
        return user
          .save()
          .then(response => console.log(response))
       }
    }
}

I am getting this error on my Chrome browser's (I am using Chrome by the way) console

POST https://api.parse./1/users 410 Access to XMLHttpRequest at 'https://api.parse./1/users' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I tried adding cors as middleware to server/index.js as follows

const cors = require('cors')
app.use(cors())

But nothing changed. How can I overe the 'ever-present' Access-Control-Allow-Origin error.

UPDATE After @Nicolas Pennec's answer

I tried creating a sign in with google feature and changed my nuxt.config.js configuration and added the following:

auth: {
    strategies: {
      google: {
        client_id:
          '****.apps.googleusercontent.'
      }
    },
    redirect: {
      login: '/login',
      logout: '/',
      callback: '/login',
      home: '/'
    }
  }

It authenticates with google properly and redirects back to my login route. It encounters error and shows the following on the console:

OPTIONS https://www.googleapis./oauth2/v3/userinfo 403
Access to XMLHttpRequest at 'https://www.googleapis./oauth2/v3/userinfo' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
[ERROR] [AUTH] Error: Network Error

• javascript
• express
• parse-server
• nuxt.js

1 Answer 1

CORS warning from http://localhost:3000/ to https://api.parse./ is not an issue, but a normal security warning. It does not depend on Nuxt but on your browser.

I remend you to use the official @nuxt/axios module + the proxy configuration to easily avoid CORS issue.

See https://axios.nuxtjs && https://github./nuxt-munity/axios-module

1/ Install module:

yarn add @nuxtjs/axios 

or

npm install @nuxtjs/axios

2/ Configure module in your nuxt.config.js:

module.exports = {
  modules: [
    '@nuxtjs/axios'
  ],
  axios: {
    proxy: true
  },
  proxy: {
    '/api': 'https://api.parse./'
  },

  // ...
}

3/ Call through axios proxy

Update your Parse configuration to call POST http://localhost:3000/api/1/users instead of POST https://api.parse./1/users

Parse.serverURL = 'http://localhost:3000/api'

or with a relative path:

Parse.serverURL = '/api'