Axios auth 对象在 Nuxt 生产中不起作用答案

【问题标题】：Axios auth object not working in Nuxt productionAxios auth 对象在 Nuxt 生产中不起作用
【发布时间】：2019-09-19 12:53:00
【问题描述】：

我正在使用 @nuxtjs/axios 和 @nuxtjs/proxy 使用 Nuxt 构建一个项目。

我有一个发布到外部（第三方）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)
    })
}

【问题讨论】：

标签： proxy axios nuxt.js

【解决方案1】：

我最终采取了一种效果很好的不同方法。它也可以说是更好/更安全。

我使用 Nuxt ServerMiddleware 选项运行将数据发布到 Wufoo 的服务器端函数 (Node/Express)。

我设置@/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)
    })
}

【讨论】：