Объект аутентификации Axios не работает в Nuxt production - PullRequest
Новая
       27

Объект аутентификации Axios не работает в Nuxt production

1 голос
/ 30 апреля 2019

Я строю проект с Nuxt , используя @ nuxtjs / axios и @nuxtjs/proxy.

У меня есть форма, которая публикуется во внешнем (стороннем) API (Wufoo.com).

Он отлично работает на localhost: 3000, но объект auth: {}, похоже, не отправляется с запросом post, когда я тестирую проект на рабочем сервере (https://myproject.test.com)

Когда я отправляю свою форму на реальном сервере, Chrome показывает мне имя пользователя и пароль, а Firefox сразу дает мне 401.

nuxt.config.js 

/*
** Nuxt.js modules
*/
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],

/*
** Axios module configuration
*/
axios: {
proxy: true,
},

/*
** Proxy module configuration
*/

proxy: {
'/wufoo': {
    target: 'https://my-account-name.wufoo.com/api/',
    pathRewrite: {
    '^/wufoo': '/'
    }
}
},

Мой метод отправки формы 

async onSubmit() {
    const auth = {
    username: 'xxxxxxxxxxx',
    password: 'yyyyyyyyyyy'
    }
    const postUrl = '/wufoo/v3/forms/f8dxcv50lg1kph/entries.json'

    const headers = {
    'Content-Type': 'multipart/form-data'
    }

    const formData = new FormData()

    formData.append('Field1', this.name) // name
    formData.append('Field5', this.email) // email
    formData.append('Field3', this.phone) // phone

    await this.$axios
    .$post(postUrl, formData, {
        headers,
        auth: {
        username: 'xxxxxxxx',
        password: 'yyyyyyyy'
        }
    })
    .then(response => {
        console.log(response)
    })
    .catch(error => {
        console.log(error)
    })
}

1 Ответ

0 голосов
/ 01 мая 2019

То, что я в итоге сделал, - это другой подход, который хорошо работает.Это также возможно лучше / безопаснее.

Я использую опцию Nuxt ServerMiddleware для запуска функции на стороне сервера (Node / Express), которая отправляет данные в Wufoo .

Я настроил @/serverMiddleware/postcontactform.js 

var bodyParser = require('body-parser')
var express = require('express')
var app = express()
var request = require("request");

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())


app.all('/', (req, res) => {
    if (req.method === 'POST') {
        var data = req.body; // req.query not allowed
    }

    request({
        uri: "https://my-account-name.wufoo.com/api/v3/forms/f8dssdsdv00lg5kph/entries.json",
        method: "POST",
        auth: {
            'username': 'xxxxxxx',
            'password': 'yyyyyyy',
            'sendImmediately': false
        },
        form: {
            'Field5': data.name,
            'Field1': data.email,
            'Field2': data.phone,
        }
    }, function (error, response, body) {
        res.send({
            body,
            response,
            error
        })
    });
})

module.exports = {
    path: '/api/postcontactform',
    handler: app
}

Этот новый код на стороне сервера, который я затем могу вызывать во внешнем интерфейсе, вот так: 

async onSubmit() {
    const postUrl = '/api/postcontactform'

    const formFields = {
        name: this.name,
        email: this.email,
        phone: this.phone,
    }

    await this.$axios
    .$post(postUrl, formFields)
    .then(response => {
        console.log(response)
    })
    .catch(error => {
        console.log(error)
    })
}
...