이 글의 내용은 springboot와 element-axios가 도메인 간 요청(코드)을 구현하는 방법에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.
1. 요소 프로젝트 초기화
1.1: vue init 웹페이지 '프로젝트 이름'
1.2: npm i element-ui -S
1.3: main.js에
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
추가 2. axios 교차 도메인 요청 추가
추가
/** * 跨域设置 * @type {AxiosStatic} */ import axios from 'axios' Vue.prototype.$axios = axios Vue.config.productionTip = false axios.defaults.withCredentials = false//这个默认即为false,如果改为true,可以传递session信息,后端要做相应修改来放行,
3. 페이지 생성
<template> <el-button @click="post">发送请求</el-button> </template> <script> import axios from "axios"; export default { data() { return { activeIndex2: '1' }; }, methods: { handleSelect(key, keyPath) { console.log(key, keyPath); }, post(){ axios.get('http://localhost:8080/test') .then(function (response) { console.log(response,"已经成功发送请求!"); }) .catch(function (error) { console.log("请求失败!"); }); } } } </script>
4. springboot 프로젝트 생성
4.1 컨트롤러 클래스 추가
@Controller @CrossOrigin public class TestController { @RequestMapping("/test") @ResponseBody public JsonResponseExt Test(){ System.out.println("在执行~~~~~~~~~"); return JsonResponseExt.success("执行"); } }
JsonResponseEx t는 나 자신이 캡슐화한 클래스이므로 직접 사용할 수 있습니다. 또한 컨트롤러 클래스에 @CrossOrigin 주석을 추가해야 합니다. 그렇지 않으면 프런트엔드 반환 결과가 오류를 보고합니다.
@Configurationpublic class CorsConfig extends WebMvcConfigurerAdapter { @Override public void addCorsMappings(CorsRegistry registry) { System.out.println("----------------------"); registry.addMapping("/**") .allowedOrigins("*") .allowCredentials(true) .allowedMethods("GET", "POST", "DELETE", "PUT") .maxAge(3600); } }
5와 같이 구성 클래스를 직접 캡슐화할 수도 있습니다. . 테스트 결과
관련 권장사항:
axios 도메인 교차 방법 요청
위 내용은 springboot 및 element-axios가 도메인 간 요청을 구현하는 방법(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!