Vue + SpringBoot跨域

最新推荐文章于 2025-03-28 23:23:31 发布

原创最新推荐文章于 2025-03-28 23:23:31 发布 · 163 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #javascript

本文介绍如何在Vue前端项目中配置代理解决跨域问题，并展示了如何在SpringBoot后端项目中通过局部和全局配置实现跨域。此外，还提供了一个Vue应用请求SpringBoot接口的具体示例。

Vue设置

1、在项目根目录创建文件vue.config.js

module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: 'http://zlf.plus', //对应自己的接口
          changeOrigin: true,
          ws: true,
          pathRewrite: {
            '^/api': ''
          }
        }
      }
    }
  }

2、在main.js中配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.config.productionTip = false

Vue.prototype.$axios = axios
//配置跨域的 `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL
axios.defaults.baseURL = '/api'  //关键代码

Vue.use(ElementUI);
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

或者使用后端跨域

springBoot配置

1、局部跨域

@RestController
public class TestController {
    /**
     *  @CrossOrigin 跨域
     *      value：请求的来源的域
     *      maxAge：表示探测请求的有效期
     *      allowedHeaders：表示允许的请求头，*表示所有的请求头都被允许
     * @return
     */
    @PostMapping("/get")
    @CrossOrigin(value = "http://localhost:8080",maxAge = 1800,allowedHeaders = "*")
    public Book getBook(){
        Book book = new Book();
        book.setId(100);
        book.setAuthor("吴承恩");
        book.setName("西游记");
        return book;
    }
}

2、全局配置

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedHeaders("*")
                .allowedMethods("*")
                .maxAge(1800)
                .allowedOrigins("http://localhost:8080");
    }
}

#案例

<template>
  <div>
      <h1>主页</h1>
      {{data}}  
  </div>
</template>

<script>
export default {
    name:'home',
    data() {
        return {
            data:''
        }
    },
    created() {
        this.getPost();
    },
    methods: {
        getPost(){
            this.$axios.request({url:"http://localhost:9090/get", method: 'post'}).then((response)=>{
                console.log(response.data)
                this.data = response.data
            })
        }
    },
}
</script>

<style>

</style>

在这里插入图片描述