前后端跨域请求代码实战（vue3.4+springboot2.7.18）

news2024/11/18 9:05:39

在这里插入图片描述

前端代码 v3.4.21（前端不是主业，所以就贴一贴代码，有疑问评论区见）
后端代码，springboot 2.7.18（后端）

文章内容：
一，后端代码
二，前端代码
三，后端跨域配置
四，测试跨域配置

一，后端：

在这里插入图片描述
接口一：

接口二：
在这里插入图片描述
启动测试一下接口：

二，前端

初始化vue3项目教程链接：vue3环境搭建
此时我们就有了前端工程
在这里插入图片描述

App.vue文件

<script setup>
import t1Query1 from "./components/t1query1.vue"
import t2Query1 from "./components/t2query1.vue"
</script>

<template>
  <t1Query1/>
  <t2Query1/>
 </template>

main.js文件

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

创建 t1query1.vue 文件(通过点击按钮调用后端接口返回数据到前端)

<template>
    <button @click="fetchData">test1query1获取数据</button>
    <p>{{ data }}</p>
  </template>
   
  <script>
  import { ref } from 'vue';
  import axios from 'axios';
   
  export default {
    setup() {
      const data = ref('');
   
      const fetchData = async () => {
        try {
          const response = await axios.get('http://localhost:11111/yyx/test1/query1');
          data.value = response.data;
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      };
      return {
        data,
        fetchData
      };
    }
  };
  </script>

创建 t2query1.vue 文件

<template>
    <button @click="fetchData">test2query1获取数据</button>
    <p>{{ data }}</p>
  </template>
   
  <script>
  import { ref } from 'vue';
  import axios from 'axios';
   
  export default {
    setup() {
      const data = ref('');
   
      const fetchData = async () => {
        try {
          const response = await axios.get('http://localhost:11111/yyx/test2/query1');
          data.value = response.data;
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      };
      return {
        data,
        fetchData
      };
    }
  };
  </script>

启动前端项目 此时命令行执行：
cd 项目路径
npm install（当缺少node模块需要执行）
npm run dev
在这里插入图片描述

跨域存在于前端访问后端的过程，存在一个同源策略，具体可以自己搜搜

三，跨域

后端跨域配置代码：

import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;


/**
 * @program: my-back-app
 * @description: 跨域的方式：
 * 1.corsFilter的 bean
 * 2、下述方法
 * 3、nginx
 * 4 spring security 方式
 *   等等
 * @author: yangyixin
 * @create: 2024-04-19 11:07
 **/
@Configuration
@Slf4j
public class CORSConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        String frontUrl = "http://localhost:5173";

        //下述表示前端在访问后端的test1下的所有接口 都需要满足的规则要求
        registry.addMapping("/test1/**")// 该方法用于添加允许跨域访问的路径，String类型，若存在多个路径则需要在CorsRegistry里配置多个(填入后端从contrller以内的路径，不需要填入yml内的相关路径)
                .allowedOriginPatterns(frontUrl)//设置允许跨域请求的来源URL的模式。该方法接受多个参数，每个参数为一个允许的来源URL模式。或者设置"*"
                //.allowedOrigins("http://localhost:5173")  // 就设置允许跨域请求的来源URL。该方法接受多个参数，每个参数为一个允许的来源URL。或者设置"*"
                .allowedMethods("GET", "POST")   // 设置允许跨域请求的HTTP方法。该方法接受多个参数，每个参数为一种允许的HTTP请求方式
                .allowedHeaders("*")// 设置允许请求携带的HTTP头信息。该方法接受多个参数，每个参数为一种允许的HTTP头信息。(放行哪些请求头部信息)
                .allowCredentials(true)//设置是否允许跨域请求携带凭证信息。默认情况下，浏览器不会向跨域请求发送Cookie等凭证信息,如果希望携带凭证信息，则需要将allowCredentials方法设置为true
                .maxAge(3600);//设置响应的缓存时间，单位为秒，默认30分钟。例如，当设置maxAge为3600时，如果浏览器在一小时内再次向同一个目标URL发送跨域请求，

        //下述表示前端在访问后端的所有接口 都需要满足的规则要求
//        registry.addMapping("/**")
//                .allowedOriginPatterns(frontUrl)
//                //.allowedOrigins("http://localhost:5173")
//                .allowedMethods("GET", "POST")
//                .allowedHeaders("*")
//                .allowCredentials(true)
//                .maxAge(3600);
        log.info("跨域配置 允许访问:{}", frontUrl);

    }
}