[Vue+Element-UI] Implementieren Sie die Login-Registrierungsschnittstelle und Axios-Anmeldefunktionen zum Abrufen und Posten von Anforderungen und lösen Sie domänenübergreifende Probleme

News 2023-10-05 06:34:46 views: null

Inhaltsverzeichnis

1. Implementieren Sie die Anmelde- und Registrierungsschnittstelle

1. Vorbereitende Vorbereitung

2. Implementierung einer statischen Anmeldeseite

2.1. Erstellen Sie Vue-Komponenten

2.2. Implementierung einer statischen Seite

2.3. Routing konfigurieren

2.4. App.vue-Stil ändern

2.5. Wirkung

3. Registrieren Sie die Implementierung einer statischen Seite

3.1. Implementierung einer statischen Seite

3.2. Routing konfigurieren

3.3. Wirkung

二、axios

1. Vorbereitende Vorbereitung

1.1. Bereiten Sie das Projekt vor

1.2. Axios installieren

1.3. Port ändern

2. GET-Anfrage

2.1. Axios importieren

2.2. Get-Anfrage schreiben

3. POST-Anfrage

3.1. Der Unterschied zwischen get und post

3.2. qs importieren

3.3. Post-Anfrage schreiben

3.4. Optimierungsverarbeitung

3.4.1. Laden Sie vue-axios herunter und installieren Sie es

3.4.2. API-Modul schreiben, um globale Konfiguration hinzuzufügen

3.4.2.1、action.js

3.4.2.2、http.js

3.4.3, main.js konfigurieren vue-axios

3.4.3. Verwenden Sie gekapselte Axios, um Anfragen zu senden

3.4.4. Geändertes Einreichungsereignis

3. Domänenübergreifend

1. Was ist ein domänenübergreifendes Problem?

2. Lösen Sie domänenübergreifende Probleme

1. Implementieren Sie die Anmelde- und Registrierungsschnittstelle

1. Vorbereitende Vorbereitung

Erstellen Sie ein SPA-Projekt mit vue-cli :

  1. Geben Sie den Verzeichnisspeicherort ein, in dem Sie das Projekt erstellen möchten
  2. Verwenden Sie den Befehl vue init webpack project name, um ein Vue-Projekt zu erstellen
    vue init webpack element_ui_spa
  3. Verwenden Sie den Befehl npm install element-ui -S, um das Element-UI- Modul hinzuzufügen
    1. npm install element-ui -S : Dahinter steht -s, das sind:
      1. -g : Laden Sie die globalen Abhängigkeiten von node_global herunter .
      2. -d : Laden Sie die Abhängigkeit da in das Spa- Projekt herunter und beteiligen Sie sich nicht an der Paketierung.
      3. -s : Laden Sie die Abhängigkeit da in das Spa- Projekt herunter und beteiligen Sie sich an der Paketierung.
  4. Öffnen Sie die package.json- Datei des Projekts , um spezifische Informationen zu hinzugefügten Modulen anzuzeigen.
  5. Erstellen Sie ein View- Verzeichnis im src- Verzeichnis (dieses Verzeichnis wird zum Speichern von Vue-Komponenten verwendet).
  6. Fügen Sie das Element-UI- Modul in main.js ein
    // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
// 新添加1
import ElementUI from 'element-ui'
// 新添加2，避免后期打包样式不同，要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css'

import App from './App'
import router from './router'

// 新添加3----实例进行一个挂载
Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})

    Am angegebenen Ort!!! Am angegebenen Ort!!! Am angegebenen Ort!!!---Fügen Sie drei Codezeilen hinzu

2. Implementierung einer statischen Anmeldeseite

2.1. Erstellen Sie Vue-Komponenten

Erstellen Sie unsere Login-Registrierungs-Vue-Komponente in unserem src .

2.2. Implementierung einer statischen Seite

Legen Sie unseren HTML-Stil fest, natürlich können wir ihn auch selbst in der Komponente | Element anpassen

<template>
  <div class="Login">
    <el-form class="login-container">
      <h1 class="title">用户登录</h1>
      <el-form-item label="">
        <el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
      </el-form-item>
      <el-row style="text-align: center;margin-top:-10px">
        <el-link type="primary">忘记密码</el-link>
        <el-link type="primary" @click="gotoRegister()">用户注册</el-link>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      msg: "登录界面",
      username: "",
      password: ""
    }
  },
  methods: {
    gotoRegister() {
      this.$router.push("/Register");
    },
    doSubmit() {

    }
  }
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url(https://pic4.zhimg.com/v2-c5880f5a6d44766feb085c3ae94899c7_r.jpg);
  //background-image: url();
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>

2.3. Routing konfigurieren

Ändern Sie die Standardanzeigeroute des Vue-Projekts im Router /index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/Login',
      name: 'Login',
      component: Login
    }
  ]
})

2.4. App.vue-Stil ändern

Ändern Sie den ursprünglichen <style> -Stil

<template>
  <div id="app">
    <!--    <img src="./assets/logo.png"><br>-->
    <br>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  widows: 100%;
  height: 100%;
}
</style>

2.5. Wirkung

3. Registrieren Sie die Implementierung einer statischen Seite

Implementieren Sie den gleichen Vorgang basierend auf der Anmeldung

3.1. Implementierung einer statischen Seite

<template>
  <div class="Register">
    <el-form class="login-container">
      <h1 class="title">用户注册</h1>
      <el-form-item label="">
        <el-input type="text" v-model="username" placeholder="注册账号" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input type="password" v-model="password" placeholder="注册密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
      </el-form-item>
      <el-row style="text-align: center;margin-top:-10px">
        <el-link type="primary">忘记密码</el-link>
        <el-link type="primary" @click="gotoLogin()">用户注册</el-link>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "Register",
  data() {
    return {
      msg: "注册界面",
      username: "",
      password: ""
    }
  },
  methods: {
    gotoLogin() {
      this.$router.push("/Login");
    },
    doSubmit() {

    }
  }
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url();
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>

3.2. Routing konfigurieren

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Register from '@/views/Register'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/Register',
      name: 'Register',
      component: Register
    }
  ]
})

3.3. Wirkung

二、axios

Verwenden Sie das SSM-Projekt, um ein Java-Backend zu erstellen, die Bereitstellung einer Aktionsadresse für die Benutzeranmeldung zu simulieren, und Vue fordert die angegebene Benutzeranmeldeschnittstelle an.

1. Vorbereitende Vorbereitung

1.1. Bereiten Sie das Projekt vor

Sie müssen ein Projekt vorbereiten, das Sie selbst abgeschlossen haben, z. B. SSM-Projekte, Maven-Projekte und SpringMVC-Projekte . Wenn Sie nicht schreiben können, können Sie auf meinen vorherigen Blog-Inhalt spring series_blog von Leuten verweisen, die sich nicht selbst- Disziplin-CSDN-Blog .

1.2. Axios installieren

Geben Sie das CMD-Fenster in das herunterzuladende Projekt ein. Sie müssen das CMD-Fenster in den Dateipfad Ihres Projekts eingeben .

npm i axios -S

Sie können sehen, was wir in unserer package.json heruntergeladen haben

1.3. Port ändern

Ändern Sie den laufenden Port des Vue-Projekts im Verzeichnis config /index.js

2. GET-Anfrage

2.1. Axios importieren

Importieren Sie die benötigten Axios in die angemeldete Vue-Datei.

import axios from 'axios'

2.2. Get-Anfrage schreiben

Denken Sie daran, Ihr Projekt beim Testen zu öffnen

//提交事件
    doSubmit() {
      //设置登录访问地址
      let url = "http://localhost:8080/ssm/user/userLogin";
      // 使用json格式进行传值
      let params = {
        username: this.username,
        password: this.password
      }
//get请求
      axios.get(url, {params: params}).then(r => {
        console.log(r);
        if (r.data.success) {//判断success是否为true
          // 为true给一个提示框
          this.$message({
            //message: '登陆成功',
            message: r.data.msg,
            type: 'success'
          });
        } else {
          this.$message({
            //message: '登陆失败',
            message: r.data.msg,
            type: 'warning'
          });
        }

      }).catch(e => {
        // console.log(e);
      });
    }

3. POST-Anfrage

3.1. Der Unterschied zwischen get und post

GET-Anfrage und POST-Anfrage sind zwei gängige HTTP-Anfragemethoden. Ihre Unterschiede sind:

  1. Datenübertragungsmethode : GET-Anfragen übertragen Daten über URL-Parameter, während POST-Anfragen Daten über den Anfragetext übertragen. Die Daten der GET-Anfrage werden an das Ende der URL angehängt und sind in der URL-Adressleiste sichtbar , während die Daten der POST-Anfrage im Anfragetext platziert und nicht in der URL angezeigt werden .
  2. Datenlängenbeschränkung : Da die Daten der GET-Anfrage an die URL angehängt werden, ist die Länge der URL begrenzt, im Allgemeinen etwa 2048 Zeichen. Das Überschreiten dieser Grenze führt dazu, dass die URL zu lang wird und die POST-Anfrage keine klaren Daten enthält Längenbegrenzung.
  3. Sicherheit : Die Parameter der GET-Anfrage werden im Klartext an die URL angehängt und eignen sich daher nicht für die Übertragung sensibler Informationen, während die Daten der POST-Anfrage im Anfragetext abgelegt werden, was relativ sicherer ist.
  4. Caching : GET-Anfragen können vom Browser zwischengespeichert und wiederverwendet werden, während POST-Anfragen vom Browser nicht zwischengespeichert werden können und jedes Mal ein erneutes Senden der Anfrage erfordern.
  5. Sonderzeichenverarbeitung : GET-Anfragen kodieren Sonderzeichen wie Leerzeichen per URL, die durch „%20“ ersetzt werden, während POST-Anfragen keine Sonderzeichen kodieren.
  6. Idempotenz: GET-Anfragen sind idempotent, d. h. mehrere identische GET-Anfragen haben keine Nebenwirkungen auf dem Server , während POST-Anfragen nicht idempotent sind und jede POST-Anfrage Nebenwirkungen haben kann , z. B. das Erstellen von Ressourcen oder das Ändern von Daten.

3.2. qs importieren

Wie in der obigen Anfrage zum Importieren von Axios importieren wir weiterhin QS.

import qs from 'qs'

3.3. Post-Anfrage schreiben

Der einzige Unterschied zur Get-Anfrage besteht darin

  • get：axios.get(url, {params: params} ).then(r => {}).catch(e => { });
  • Beitrag: axios.get(url, qs.stringify(params) ).then(r => {}).catch(e => { }); 
//提交事件
    doSubmit() {
      //设置登录访问地址
      let url = "http://localhost:8080/ssm/user/userLogin";
      // 使用json格式进行传值
      let params = {
        username: this.username,
        password: this.password
      }
//post请求
      axios.post(url, qs.stringify(params)).then(r => {
        console.log(r);
        if (r.data.success) {//判断success是否为true
          // 为true给一个提示框
          this.$message({
            //message: '登陆成功',
            message: r.data.msg,
            type: 'success'
          });
        } else {
          this.$message({
            //message: '登陆失败',
            message: r.data.msg,
            type: 'warning'
          });
        }

      }).catch(e => {
        // console.log(e);
      });
    }

3.4. Optimierungsverarbeitung

3.4.1. Laden Sie vue-axios herunter und installieren Sie es

Laden Sie vue-axios im CMD-Befehlsfenster herunter.

3.4.2. API-Modul schreiben, um globale Konfiguration hinzuzufügen

Erstellen Sie einen neuen API-Ordner im src-Verzeichnis und erstellen Sie unten zwei Dateien action.js und http.js.

3.4.2.1、action.js
/**
 * 文件接口地址定义文件
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
  'SERVER': 'http://localhost:8080/ssm', //服务器访问地址
  'SYSTEM_USER_DOLOGIN': '/user/userLogin', //登陆请求
  'SYSTEM_USER_DOREG': '/user/userRegister', //注册请求
  'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
    return this.SERVER + this[k];
  }
}
3.4.2.2、http.js
/**
 * vue项目对axios的全局配置
 */
import axios from 'axios'
import qs from 'qs'

//引入action模块，并添加至axios的类属性urls上
import action from '@/api/action'
axios.urls = action

// axios默认配置
axios.defaults.timeout = 10000; // 超时时间
// axios.defaults.baseURL = 'http://localhost:8080/j2ee15'; // 默认地址
axios.defaults.baseURL = action.SERVER;

//整理数据
// 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
axios.defaults.transformRequest = function(data) {
	data = qs.stringify(data);
	return data;
};


// 请求拦截器
axios.interceptors.request.use(function(config) {
	return config;
}, function(error) {
	return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(function(response) {
	return response;
}, function(error) {
	return Promise.reject(error);
});

export default axios;
3.4.3, main.js konfigurieren vue-axios

Fügen Sie das API- Modul und das Vue-Axios- Modul in die Datei main.js ein

import axios from '@/api/http'                 
import VueAxios from 'vue-axios' 

Vue.use(VueAxios,axios)

3.4.3. Verwenden Sie gekapselte Axios, um Anfragen zu senden

Entfernen Sie importierte Axios- und QS-Module aus der Login.vue- Komponente

import axios from 'axios'
import qs from 'qs'
3.4.4. Geändertes Einreichungsereignis
doSubmit() {
      //设置登录访问地址
      let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
      // 使用json格式进行传值
      let params = {
        username: this.username,
        password: this.password
      }
      this.axios.post(url, params).then(r => {
        console.log(r);
        if (r.data.success) {//判断success是否为true
          // 为true给一个提示框
          this.$message({
            message: r.data.msg,
            type: 'success'
          });
        } else {
          this.$message({
            message: r.data.msg,
            type: 'warning'
          });
        }

      }).catch(e => {
      });

    }

4. Implementierung der Registrierungsfunktion

4.1. Seitenimplementierung

Natürlich können Sie Ihre eigene Seite entsprechend Ihrer eigenen Datenbank und Ihren eigenen Bedürfnissen definieren.

<template>
  <div class="Register">

    <el-form class="login-container">
      <h1 class="title">用户注册</h1>
      <el-form-item label="">
        <el-input type="text" v-model="username" placeholder="输入账号" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input type="password" v-model="password" placeholder="输入密码" show-password autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="账号名称" label-width="80px" style="margin-left: 5px;" prop="name">
        <el-input v-model="realname"></el-input>
      </el-form-item>

      <el-form-item label="性别" style="margin-left: 20px;">
        <el-radio-group v-model="sex">
          <el-radio label="1">男</el-radio>
          <el-radio label="2">女</el-radio>
          <el-radio label="3">其他</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="身 份 证" label-width="80px" style="margin-left: 0px;" prop="name">
        <el-input v-model="idcard"></el-input>
      </el-form-item>

      <el-input type="textarea" :rows="2" placeholder="请输入地址" v-model="address">
      </el-input>

      <el-form-item style="margin-top: 30px;">
        <el-button type="primary" style="width:100%;"
                   @click="Register()">注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;册
        </el-button>
      </el-form-item>
      <el-row style="text-align: center;margin-top:-10px">
        <el-link type="primary">忘记密码</el-link>
        <el-link type="primary" @click="Login()">用户登入</el-link>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data() {
    return {
      username: "",
      password: "",
      realname: '',
      sex: 0,
      idcard: '',
      address: '',
      msg: '嗨！嗨！嗨！',
      rules: {
        realname: [{
          required: true,
          message: '请输入账号名称',
          trigger: 'blur'
        },
          {
            min: 3,
            max: 18,
            message: '长度在 3 到 18 个字符',
            trigger: 'blur'
          }
        ]
      }
    }

  },
  methods: {
    Login() {
      this.$router.push('/Login');
    },
    Register() {
      let params = {
        username: this.username,
        password: this.password,
        realname: this.realname,
        sex: this.sex,
        idcard: this.idcard,
        address: this.address
      };
      //定义后端都请求地址
      var url = this.axios.urls.SYSTEM_USER_DOREG;
      console.log(params);
      console.log(url);
      //以下是post请求及整合资源
      //通过qs中的stringify方法进行格式转换
      //注意数据是保存到json对象的params属性
      this.axios.post(url, params).then(r => {
        console.log(r);
        //如果携带的参数数据跟后端数据对应正确，说明登入成功，提示
        if (r.data.success) {
          this.$message({
            showClose: true,
            message: r.data.msg,
            type: 'success'
          });
          //注册完成后自动进入登入界面
          this.$router.push('/Login');
        } else {
          //如果携带的参数数据跟后端数据对应错误，说明登入失败，提示
          this.$message.error(r.data.msg);
        }
      }).catch(e => {
        console.log(e);
      });


    }
  }
}
</script>

<style scoped>
.login-wrap {
  padding-top: 30px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-image: url();
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>

4.2. Definieren Sie Schnittstellen und Schnittstellenimplementierungsklassen

Schnittstelle

int insertSelective(User record);

Schnittstellenimplementierung

    @Override
    public int insertSelective(User record) {
        return userMapper.insertSelective(record);
    }

4.3. Controller-Ebene

Das Schreiben von Methoden in Controller erfordert eine bestimmte Grundlage von springmvc

 @RequestMapping("/userRegister")
    @ResponseBody
    public JsonResponseBody<?> userRegister(UserVo userVo, HttpServletResponse response) {
        //状态新注册默认为0
        userVo.setStatus("0");
        //因为ID为String类型需要手动设置，当然可以根据自己的需要改为Int类型
        userVo.setId("6");
        int i = userService.insertSelective(userVo);
        if (i > 0) {
            return new JsonResponseBody<>("用户注册完成！快去登入吧！", true, 0, null);
        } else {
            return new JsonResponseBody<>("用户注册失败！重新输入。", false, 0, null);
        }
    }

4.4. Testen

3. Domänenübergreifend

1. Was ist ein domänenübergreifendes Problem?

        Cross-Origin Resource Sharing (CORS) bezieht sich auf die Tatsache, dass auf der Browserseite aufgrund von Sicherheitsrichtlinienbeschränkungen Webseiten (oder Ajax-Anfragen) zwischen verschiedenen Quellen (Domänen/Protokolle/Ports) nicht direkt interagieren oder auf Ressourcen zugreifen können . Die Same-Origin-Richtlinie ist ein Browser-Sicherheitsmechanismus, der zum Schutz von Benutzerinformationen und zur Verhinderung böswilliger Angriffe dient.

        Die Same-Origin-Richtlinie erfordert, dass Webseiten nur mit Ressourcen desselben Ursprungs interagieren können. Der Ursprung besteht aus Protokoll, Domänenname und Portnummer. Browser blockieren domänenübergreifende Anfragen, wenn der Ursprung inkonsistent ist. Wenn beispielsweise eine Webseite in Domäne A ausgeführt wird und versucht, über JavaScript eine AJAX-Anfrage an Domäne B zu senden, wird ein domänenübergreifendes Problem ausgelöst.

2. Lösen Sie domänenübergreifende Probleme

Schreiben Sie den domänenübergreifenden Filter CorsFilter2 in Ihr Projekt .

package com.zking.ssm.util;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;

/**
 * 配置tomcat允许跨域访问
 * 
 * @author Administrator
 *
 */
public class CorsFilter2 implements Filter {

	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
	}

	@Override
	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
			throws IOException, ServletException {
		HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;

		// Access-Control-Allow-Origin就是我们需要设置的域名
		// Access-Control-Allow-Headers跨域允许包含的头。
		// Access-Control-Allow-Methods是允许的请求方式
		httpResponse.setHeader("Access-Control-Allow-Origin", "*");// *,任何域名
		httpResponse.setHeader("Access-Control-Allow-Headers", "responseType,Origin, X-Requested-With, Content-Type, Accept");
		httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");

		//允许客户端处理一个新的响应头jwt
		//httpResponse.setHeader("Access-Control-Expose-Headers", "jwt,Content-Disposition");
		filterChain.doFilter(servletRequest, servletResponse);
	}

	@Override
	public void destroy() {

	}
}

Fügen Sie die Filterkonfiguration in web.xml hinzu, und dann ist mein domänenübergreifendes Problem gelöst.

  <!--CrosFilter跨域过滤器-->
  <filter>
    <filter-name>corsFilter</filter-name>
    <filter-class>com.zking.ssm.util.CorsFilter2</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>corsFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

Das war's, damit ich es teile, jeder ist herzlich eingeladen, im Kommentarbereich darüber zu diskutieren! ! !

Ich denke du magst

Origin blog.csdn.net/weixin_74383330/article/details/133181213
Empfohlen
Rangfolge
Täglich
Mehr
2024-05-17(5)
2024-05-16(23)
2024-05-15(5)
2024-05-14(10)
2024-05-13(8)
2024-05-12(28)
2024-05-11(31)
2024-05-10(33)
2024-05-09(31)
2024-05-08(18)

Code World

© 2018 codetd.com