【Vue】集成HTTP库Axios

原创

瑞新的博客 2022-01-11 13:53:24 ©著作权

文章标签 ajax java vue.js ios spring 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者瑞新的博客的原创作品，请联系作者获取转载授权，否则将追究法律责任

安装

进入vue项目目录

npm install axios@0.21.0 --save

版本

【Vue】集成HTTP库Axios_ios

简单使用

在一个页面中通过axios发送请求拿到后端数据

【Vue】集成HTTP库Axios_vue.js_02

Home.vue

import axios from 'axios'; // 1引入库

export default defineComponent({
  name: 'Home',
  setup(){ // 2初始化方法
      console.log("setup")
      axios.get("http://localhost:8081/hello").then((res)=>{
          console.log("这是请求返回的数据", res)
      })
  }

});
</script>

问题

解决跨域问题-java配置文件

效果图

【Vue】集成HTTP库Axios_ios_03

跨域拦截后端不信任前端跨域请求

【Vue】集成HTTP库Axios_ajax_04

【Vue】集成HTTP库Axios_java_05

java

package com.bennyrhys.wiki.config;

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;

/**
 * @Author bennyrhys
 * @Date 11/17/21 11:05 PM
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 请求地址
                .allowedOriginPatterns("*") // 允许来源
                .allowedHeaders(CorsConfiguration.ALL)
                .allowedMethods(CorsConfiguration.ALL)
                .allowCredentials(true) // 凭证比如session cookie
                .maxAge(3600); // 1小时内不需要再预检（前端对后端发OPTION请求）
    }
}