Nuxt.js POSTing к серверу разбора внутри asyncData приводит к кросс-исходной ошибке - PullRequest
Новая
       14

Nuxt.js POSTing к серверу разбора внутри asyncData приводит к кросс-исходной ошибке

0 голосов
/ 29 ноября 2018

Я использую nuxt для создания клиента, который получает данные с сервера разбора.В моем index.vue я отправляю запрос на сервер разбора внутри asyncData.Я на сервере разработки, работающем на локальном хосте: 3000.

Вот часть моего файла index.vue 

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

        user.set('email', 'email@company.com')
        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))
       }
    }
}

Я получаю эту ошибку на моем Chrome Консоль браузера (я, кстати, использую Chrome)

POST https://api.parse.com/1/users 410 Access to XMLHttpRequest at 'https://api.parse.com/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.

Я попытался добавить cors в качестве промежуточного ПО для server / index.js следующим образом 

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

НоНичего не изменилось.Как мне преодолеть «вездесущую» ошибку Access-Control-Allow-Origin.

ОБНОВЛЕНИЕ После ответа @Nicolas Pennec

Я попытался создать вход с помощьюФункция Google и изменил мою конфигурацию nuxt.config.js и добавил следующее: 

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

Он аутентифицируется с Google правильно и перенаправляет обратно на мой маршрут входа в систему.Он обнаруживает ошибку и показывает следующее на консоли: 

OPTIONS https://www.googleapis.com/oauth2/v3/userinfo 403
Access to XMLHttpRequest at 'https://www.googleapis.com/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

1 Ответ

0 голосов
/ 29 ноября 2018

Предупреждение CORS от http://localhost:3000/ до https://api.parse.com/ - это не проблема, а обычное предупреждение безопасности.Это зависит не от Nuxt, а от вашего браузера.

Я рекомендую использовать официальный @nuxt/axios модуль + proxy конфигурацию, чтобы легко избежать проблемы с CORS.

См. https://axios.nuxtjs.org && https://github.com/nuxt-community/axios-module

1 / Установить модуль: 

yarn add @nuxtjs/axios

или 

npm install @nuxtjs/axios

2 / Сконфигурировать модуль в nuxt.config.js:

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

  // ...
}

3 / Вызов через прокси Axios

Обновите свою конфигурацию Parse, чтобы позвонить POST http://localhost:3000/api/1/users вместо POST https://api.parse.com/1/users

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

или с относительнымпуть: 

Parse.serverURL = '/api'
...