How to fix Access to XMLHttpRequest at from origin has been blocked by CORS policy in nuxtjs?

Question

iam using nuxt-auth module and using API for get the token , but i got an error about CORS Policy , what should i do ?

i've try another API for login and success . I got error like this

Access to XMLHttpRequest at 'http://blablabla.co.id/index.php/api_users/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

this is my nuxt.config.js :

axios: {
 baseURL: 'http://blablabla.co.id/index.php'
},
auth: {
 redirect: {
  login: '/login',
  home: '/mainmap',
  logout: '/login'
},
strategies: {
  local: {
    endpoints: {
      login: {
        url: '/api_users/login',
        method: 'post',
        propertyName: 'token'
      },
      logout: false
    }
  }
},
token: {
  name: 'token'
},
cookie: {
  name: 'token'
}

and my login component:

async login () {
    try {
      await this.$auth.loginWith('local', {
        data: {
          username: this.username,
          password: this.password
        }
      })

      this.$router.push('/')
    } catch (e) {
      console.log(e.response)
      this.error = e.response.data.error
    }
  }

Response from API is

{"status_code":400,"status_text":"BAD REQUEST","error":["username field is required","password field is required"]}

i've debug and username and password is doesnt empty, so anyone can help with this issue?

pranavkumar389 pranavkumar389 · Accepted Answer · 2019-09-18T05:06:48

The response doesn't show any Error like CORS. The response status code is 400. If it was a CORS error you will get the error on the HTTP side only.

Please check your request payload. If possible please post the screenshot of the request payload.

How to fix Access to XMLHttpRequest at from origin has been blocked by CORS policy in nuxtjs?

2 Answers