Vue3 (V) Details of integrating HTTP library axios

Vue3 (V) Details of integrating HTTP library axios

1. Install axios

npm install axios@0.21.0 --save

2. Use of axios

1. Reference axios in the homepage

In Vue3 a new setup initialization method was added, so we start using and testing it here. The sample code is as follows:

<template>
  <a-layout>
    <a-layout-sider width="200" style="background: #fff">
      <a-menu
          mode="inline"
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          :style="{ height: '100%', borderRight: 0 }"
      >
        <a-sub-menu key="sub1">
          <template #title>
                <span>
                  <user-outlined />
                  subnav 1
                </span>
          </template>
          <a-menu-item key="1">option1</a-menu-item>
          <a-menu-item key="2">option2</a-menu-item>
          <a-menu-item key="3">option3</a-menu-item>
          <a-menu-item key="4">option4</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
                <span>
                  <laptop-outlined />
                  subnav 2
                </span>
          </template>
          <a-menu-item key="5">option5</a-menu-item>
          <a-menu-item key="6">option6</a-menu-item>
          <a-menu-item key="7">option7</a-menu-item>
          <a-menu-item key="8">option8</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <template #title>
                <span>
                  <notification-outlined />
                  subnav 3
                </span>
          </template>
          <a-menu-item key="9">option9</a-menu-item>
          <a-menu-item key="10">option10</a-menu-item>
          <a-menu-item key="11">option11</a-menu-item>
          <a-menu-item key="12">option12</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >
      Content
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import axios from 'axios';

export default defineComponent({
  name: 'Home',
  setup(){
    console.log('set up');
    axios.get("http://localhost:8888/ebook/list?name=spring").then(response =>{
      console.log(response);
    })
  }
});
</script>

2. Restart the service

After starting the service, open the homepage and there is nothing abnormal, as shown below:

but , things are not as good as we thought. Do you dare to open F12 and look at the console?

If you are afraid, I will open it, as shown below:

Ignore the warning part, the red circle part is an error.

Don't panic if you get an error. This is normal. Just solve the problem. It is obviously a cross-domain problem. To put it simply, although it is the same IP, the port is different, which makes it impossible to access.

3. What is cross-domain?

It can be understood that when a page from one IP port ( vue project) accesses resources from another IP port ( springboot request interface), cross-domain access will occur.

4. Solve cross-domain issues

Add the CorsConfig configuration class to solve the cross-domain problem. The sample code is as follows:

import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedHeaders(CorsConfiguration.ALL)
                .allowedMethods(CorsConfiguration.ALL)
                .allowCredentials(true)
                .maxAge(3600); // No need for pre-check within 1 hour (send OPTIONS request)
    }

}

5. Restart the backend service and access again

Now it’s time to witness the miracle. Press F12 to see the truth. Ignore the warning and you can see the printed response content, as shown in the following figure:

Conclusion

In fact, we can also use jQuery to do this. They are all the same. Which one you like depends on what you are used to. Here, the integrated HTTP library axios is introduced. Students who are interested are welcome to try it by themselves.

This is the end of this article about the details of Vue3 integrated HTTP library axios . For more relevant Vue3 integrated HTTP library axios content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed example of using typescript to encapsulate axios in Vue3
  • Use vue3.x+vite+element-ui+vue-router+vuex+axios to build a project
  • Vue3+TypeScript encapsulates axios and implements request calls
  • Vue3 configures axios cross-domain implementation process analysis
  • Vue3 uses axios interceptor to print front-end logs

<<:  HTML table markup tutorial (30): cell dark border color attribute BORDERCOLORDARK

>>:  TCP third handshake data transmission process diagram

Recommend

Implementation of MySQL asc and desc data sorting

Data sorting asc, desc 1. Single field sorting or...

VMware workstation 12 install Ubuntu 14.04 (64 bit)

1. Installation Environment Computer model: Lenov...

Analysis of the methods of visual structure layout design for children's websites

1. Warm and gentle Related address: http://www.web...

MySQL conditional query and or usage and priority example analysis

This article uses examples to illustrate the usag...

Implementing WeChat tap animation effect based on CSS3 animation attribute

Seeing the recent popular WeChat tap function, I ...

Convert XHTML CSS pages to printer pages

<br />In the past, creating a printer-friend...

JavaScript to dynamically load and delete tables

This article shares the specific code of JavaScri...

Detailed explanation of the steps to create a web server with node.js

Preface It is very simple to create a server in n...

Docker builds Redis5.0 and mounts data

Table of contents 1. Simple mounting of persisten...

MySQL 8.0.11 Installation Tutorial under Windows

This article records the installation tutorial of...

How to create components in React

Table of contents Preface Component Introduction ...

HTML basic summary recommendation (title)

HTML: Title Heading is defined by tags such as &l...