Nuxt.js POST 到 asyncData 内的解析服务器会导致跨域错误

Question

我正在使用 nuxt 构建一个从解析服务器获取数据的客户端。在我的 index.vue 中，我向 asyncData 内的解析服务器发送请求。我在 localhost: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: '/'
    }
  }

它正确地通过谷歌进行身份验证并重定向回我的登录路线。它遇到错误并在控制台上显示以下内容：

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

Answer 1

来自http://localhost:3000/to 的CORS 警告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'