1. Install axiosnpm install axios@0.21.0 --save 2. Use of axios1. Reference axios in the homepage In <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 serviceAfter starting the service, open the homepage and there is nothing abnormal, as shown below: 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 ( 4. Solve cross-domain issues Add the 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 Conclusion In fact, we can also use This is the end of this article about the details of You may also be interested in:
|
<<: HTML table markup tutorial (30): cell dark border color attribute BORDERCOLORDARK
>>: TCP third handshake data transmission process diagram
Data sorting asc, desc 1. Single field sorting or...
1. Installation Environment Computer model: Lenov...
I recently used the ssm framework when doing a pr...
1. Warm and gentle Related address: http://www.web...
This article uses examples to illustrate the usag...
Seeing the recent popular WeChat tap function, I ...
<br />In the past, creating a printer-friend...
This article shares the specific code of JavaScri...
Preface Mobile devices have higher requirements f...
Preface It is very simple to create a server in n...
Table of contents Jenkins installation Install Ch...
Table of contents 1. Simple mounting of persisten...
This article records the installation tutorial of...
Table of contents Preface Component Introduction ...
HTML: Title Heading is defined by tags such as &l...