Home Web Front-end JS Tutorial How to solve the problem that vue integrates axios and sends post request payload, causing the background to be unable to receive data.

How to solve the problem that vue integrates axios and sends post request payload, causing the background to be unable to receive data.

May 19, 2018 pm 02:46 PM
axios send integrated

After integrating axios, vue will send post requests in payload mode by default. If you want to change to the normal method, you need to add headers and change the sent data json format to querystring.

Installing dependencies

cnpm install qs
Copy after login

Importing dependencies

import Qs from 'qs'
Copy after login

Use the following method where post is required, where postData is a json object

this.$http({
    url: '/api/act/yourApi.api',
    method: 'POST',
    headers: {        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    data: Qs.stringify(postData)
})
    .then(res => {
        console.log(res);
    })
    .catch(err => {
        console.log(err);
    })
Copy after login

Like this, The data sent is sent in form-urlencodoed mode.

The above is the detailed content of How to solve the problem that vue integrates axios and sends post request payload, causing the background to be unable to receive data.. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Choice of data request in Vue: Axios or Fetch? Choice of data request in Vue: Axios or Fetch? Jul 17, 2023 pm 06:30 PM

Choice of data request in Vue: AxiosorFetch? In Vue development, handling data requests is a very common task. Choosing which tool to use for data requests is a question that needs to be considered. In Vue, the two most common tools are Axios and Fetch. This article will compare the pros and cons of both tools and give some sample code to help you make your choice. Axios is a Promise-based HTTP client that works in browsers and Node.

How to send files to others on TikTok? How to delete files sent to others? How to send files to others on TikTok? How to delete files sent to others? Mar 22, 2024 am 08:30 AM

On Douyin, users can not only share their life details and talents, but also interact with other users. In this process, sometimes we need to send files to other users, such as pictures, videos, etc. So, how to send files to others on Douyin? 1. How to send files to others on Douyin? 1. Open Douyin and enter the chat interface where you want to send files. 2. Click the "+" sign in the chat interface and select "File". 3. In the file options, you can choose to send pictures, videos, audio and other files. After selecting the file you want to send, click "Send". 4. Wait for the other party to accept your file. Once the other party accepts it, the file will be transferred successfully. 2. How to delete files sent to others on Douyin? 1. Open Douyin and enter the text you sent.

Efficiently utilize Vue and Axios to implement batch processing of front-end data Efficiently utilize Vue and Axios to implement batch processing of front-end data Jul 17, 2023 pm 10:43 PM

Efficiently utilize Vue and Axios to implement batch processing of front-end data. In front-end development, data processing is a common task. When we need to process a large amount of data, processing the data will become very cumbersome and inefficient if there is no effective method. Vue is an excellent front-end framework, and Axios is a popular network request library. They can work together to implement batch processing of front-end data. This article will introduce in detail how to efficiently use Vue and Axios for batch processing of data, and provide relevant code examples.

WhatsApp Tips: How to Send HD Photos and Videos WhatsApp Tips: How to Send HD Photos and Videos Sep 10, 2023 am 10:13 AM

WhatsApp has launched a new option that allows users to send photos and videos in high resolution through the messaging platform. Read on to find out how it's done. WhatsApp has released an update that allows iPhone and Android users to send photos and videos in high resolution, finally addressing the service's low-quality media sharing limitations. The option is called "HD Quality" and means users can send clearer photos and videos with minimal compression. For example, images captured on the iPhone can now be sent at 3024x4032 resolution instead of the previous maximum of 920x1280, while videos can be sent at 1280×718 resolution instead of 848×476.

How to migrate and integrate projects in GitLab How to migrate and integrate projects in GitLab Oct 27, 2023 pm 05:53 PM

How to migrate and integrate projects in GitLab Introduction: In the software development process, project migration and integration is an important task. As a popular code hosting platform, GitLab provides a series of convenient tools and functions to support project migration and integration. This article will introduce the specific steps for project migration and integration in GitLab, and provide some code examples to help readers better understand. 1. Project migration Project migration is to migrate the existing code base from a source code management system to GitLab

How to use check-ins with home, different locations, and timers How to use check-ins with home, different locations, and timers Mar 24, 2024 am 09:31 AM

How to let others know that you have arrived at your destination. Telling others that you have arrived at your destination safely is the most common way of "checking in" and it is easy to operate. Here are the steps to set up before you’re ready to embark on the next leg of your journey. Open a message and start a conversation with the person you want to send a check-in to. Click the plus (+) icon next to the message field. Click Check-in. Click Edit at the bottom of the prompt. Enter the destination you want to go to. Select "Done" in the upper right corner and send "Check-in." "When entering your destination, you can choose different modes of travel depending on your needs, whether that's by car, public transport or walking. Make sure you choose the device you're using correctly so your device can accurately estimate how long it will take to get to your destination. This allows you to better plan your trip and get you to your destination more conveniently.

Oracle API integration strategy analysis: achieving seamless communication between systems Oracle API integration strategy analysis: achieving seamless communication between systems Mar 07, 2024 pm 10:09 PM

OracleAPI integration strategy analysis: To achieve seamless communication between systems, specific code examples are required. In today's digital era, internal enterprise systems need to communicate with each other and share data, and OracleAPI is one of the important tools to help achieve seamless communication between systems. This article will start with the basic concepts and principles of OracleAPI, explore API integration strategies, and finally give specific code examples to help readers better understand and apply OracleAPI. 1. Basic Oracle API

How to get HTML form data as text and send to html2pdf? How to get HTML form data as text and send to html2pdf? Sep 06, 2023 pm 12:21 PM

html2pdf is a JavaScript package that allows developers to convert html to canvas, pdf, images, and more. It takes html as parameter and adds it to pdf or desired document. Additionally, it allows users to download the document after adding html content. Here we will access the form and add it to the pdf using the html2pdfnpm package. We will see different examples to add form data to pdf. Syntax User can follow the following syntax to pass html form data as text and send it to html2pdf. varelement=document.getElementById('form');html2

See all articles