springboot + vue3 + vite + axios 配置跨域

springboot版本

        org.springframework.boot
        spring-boot-starter-parent
        2.5.2
         
    

配置类

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

import java.util.Collections;

@Configuration
public class CorsConfig {

    @Bean
    CorsFilter corsFilter() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOriginPatterns(Collections.singletonList("*"));
        configuration.setAllowedMethods(Collections.singletonList("*"));
        configuration.setAllowedHeaders(Collections.singletonList("*"));
        configuration.setAllowCredentials(true);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return new CorsFilter(source);
    }
}

vue axios 版本

  "dependencies": {
    "axios": "^1.2.0",
    "element-plus": "^2.2.25",
    "vue": "^3.2.41"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.2.0",
    "vite": "^3.2.3"
  }

vite.config.js配置

/demo 可以替换为你们自己公共的路径

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    proxy: { 
      '/demo': {
       target: "http://127.0.0.1:9083",
       changeOrigin: true,
       rewrite: (path) => path.replace(/^\/demo/, '')
      }
    }
  }
})

使用

import axios from 'axios'

//测试请求方法

const getData = function () {

  axios({

    url: 'http://localhost:9083/demo/demo/a',

    method: 'get',

    headers: {

      "Content-Type": "application/octet-stream",

      "Access-Control-Allow-Origin": "*",

    }

  }).then((res) => {

    console.log('请求成功!', res)

    alert('请求成功!', res);



  });

}