Question

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

我有一个表单可以发布到外部（第三方）API（Wufoo.com）。

在localhost：3000上运行正常，但是当我在生产服务器（https://myproject.test.com）上测试项目时，auth: {}对象似乎未随发布请求一起发送

当我在真实服务器上提交表单时，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)
    })
}

Answer 1

我最终要做的是采用另一种方法，效果很好。可以说它也更好/更安全。

我使用Nuxt ServerMiddleware选项运行服务器端功能（节点/ 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)
    })
}

Axios身份验证对象在Nuxt生产中不起作用

1 个答案: