Heim > Web-Frontend > js-Tutorial > Wie Springboot und Element-Axios domänenübergreifende Anforderungen implementieren (Code)

Wie Springboot und Element-Axios domänenübergreifende Anforderungen implementieren (Code)

不言
Freigeben: 2018-09-14 17:44:13
Original
3606 Leute haben es durchsucht

Der Inhalt dieses Artikels handelt davon, wie Springboot und Element-Axios domänenübergreifende Anforderungen (Code) implementieren. Ich hoffe, dass er für Sie hilfreich ist.

1. Elementprojekt initialisieren
1.1: vue init-Webseite „Projektname“
1.2: npm i element-ui -S
1.3: In main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Nach dem Login kopieren

hinzufügen 2. Axios Cross-Domain-Anfrage

hinzufügen

/**
  * 跨域设置
  * @type {AxiosStatic}
  */
  import axios from 'axios'
  Vue.prototype.$axios = axios
  Vue.config.productionTip = false
  axios.defaults.withCredentials = false//这个默认即为false,如果改为true,可以传递session信息,后端要做相应修改来放行,
Nach dem Login kopieren
< in main.js hinzufügen 🎜>

3. Seite erstellen

<template>
  <el-button @click="post">发送请求</el-button>
</template>

<script>
  import axios from "axios";
  export default {

    data() {
      return {
        activeIndex2: &#39;1&#39;
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      post(){
        axios.get(&#39;http://localhost:8080/test&#39;)
          .then(function (response) {
            console.log(response,"已经成功发送请求!");
          })
          .catch(function (error) {
            console.log("请求失败!");
          });
      }


    }
  }
</script>
Nach dem Login kopieren

4. Springboot-Projekt erstellen

4.1 Eine Controller-Klasse hinzufügen

@Controller
@CrossOrigin
public class TestController {
    @RequestMapping("/test")
    @ResponseBody
    public JsonResponseExt Test(){
        System.out.println("在执行~~~~~~~~~");
        return JsonResponseExt.success("执行");
    }

}
Nach dem Login kopieren

JsonResponseExt ist eine von mir gekapselte Klasse.

Außerdem muss die Annotation @CrossOrigin zur Controller-Klasse hinzugefügt werden, andernfalls meldet das Front-End-Rückgabeergebnis einen Fehler

Sie können eine Konfigurationsklasse auch selbst kapseln, z. B.

@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);
    }


}
Nach dem Login kopieren

Testergebnisse

Verwandte Empfehlungen:

Wie Axios-Anfragen domänenübergreifend sind

vue-cli Axios-Anfragen und domänenübergreifend

Das obige ist der detaillierte Inhalt vonWie Springboot und Element-Axios domänenübergreifende Anforderungen implementieren (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage