Блог

Я создаю приложение в основном для изучения 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=... ).

Я менялся туда-сюда несколько раз, и это единственное свойство — все, что я меняю, чтобы возникла эта странность.

Я нашел обходной путь в обсуждении на 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: {...}
      })
 

Похоже, прокси работает правильно

params опция отправляет данные в виде параметров запроса, поэтому вы увидите их в URL. Если вы используете POST метод, data это обычно то, что вы бы использовали с ним, поскольку он отправляет его в качестве полезной нагрузки. Это также предполагает, что вы отправляете полезную нагрузку json и, возможно, ожидаете ответа формы, который будет обработан по-другому.. Но трудно сказать, чего ожидает ваш php API.