springboot + vue3 + vite + axios 配置跨域

最新推荐文章于 2024-05-18 09:00:00 发布

我知道了恩

最新推荐文章于 2024-05-18 09:00:00 发布

阅读量1.6k

点赞数 2

分类专栏： vue 文章标签： spring boot java 后端

本文链接：https://blog.csdn.net/weixin_34848129/article/details/128114602

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

springboot版本

<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.2</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

配置类

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



  });

}