javascript - 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 从源“http://localhost:3000”访问“https://api.parse.com/1/users”处的 XMLHttpRequest 已被 CORS 策略阻止:不存在“Access-Control-Allow-Origin” header 在请求的资源上。

我尝试将 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/ 到 https://api.parse.com/ 的 CORS 警告不是问题，而是正常的安全警告。它不依赖于 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'