#vue.js #vuejs3
#vue.js #vuejs3
Вопрос:
Я создаю приложение в основном для изучения Vue (Vue3).
Интерфейс на порту 8080 использует Axios для отправки на серверную часть на порт 80.
Вот мой vue.config.js
module.exports = {
devServer: {
host: 'myste.com',
public: 'myste.com:8080',
proxy: {
"/fn/*": {
target: "http://myste.com",
// because changeOrigin is true, and port 80 is the default, I don't need to include it here.
changeOrigin: true,
pathRewrite: {
'^/fn': ''
}
}
}
}
}
В документах указано отправлять данные с помощью свойства data
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
Итак, это то, что я сделал в своем приложении Vue3
this.$http({
method: 'post',
url: e.target.action,
data: {toEmail: document.querySelector('.toEmail').value}
});
Это приводит к вызову правильного URL-адреса ( myste.com/handler.php
), измененного в соответствии с требованиями proxy
настроек, но данные с ним не отправляются. Мой серверный сервер сообщает, что первый аргумент отсутствует.
Если я изменю «данные» на параметры
this.$http({
method: 'post',
url: e.target.action,
params: {toEmail: document.querySelector('.toEmail').value}
});
Он отправляет все данные, но по неправильному URL ( myste.com:8080/fn/handler.php?toEmail=...
).
Я менялся туда-сюда несколько раз, и это единственное свойство — все, что я меняю, чтобы возникла эта странность.
Ответ №1:
Я нашел обходной путь в обсуждении на github, который делает все довольно простым и обрабатывает data.
, мне все еще интересно узнать, в чем проблема и как я могу ее исправить.
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
axios.interceptors.request.use((config) => {
if (config.headers['Content-Type'] amp;amp; config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
config.transformRequest = (data) => {
const str = [];
Object.keys(data).forEach(key => str.push(`${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`));
return str.join('amp;');
};
}
return config;
}, error => Promise.reject(error));
Мой вызов this.$http
now выглядит так, добавляя тип содержимого.
this.$http({
method: 'post',
url: e.target.action,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: {...}
})
Ответ №2:
Похоже, прокси работает правильно
params
опция отправляет данные в виде параметров запроса, поэтому вы увидите их в URL. Если вы используете POST
метод, data
это обычно то, что вы бы использовали с ним, поскольку он отправляет его в качестве полезной нагрузки. Это также предполагает, что вы отправляете полезную нагрузку json и, возможно, ожидаете ответа формы, который будет обработан по-другому.. Но трудно сказать, чего ожидает ваш php API.