前后端分离

Mahe666

Vue.js 和 SpringBoot 项目进行前后端交互

简单的案例

testCors.rar

SpringBoot项目

不要忘记在Controller层的类或方法上添加 @CrossOrigin 注解以支持局部跨域
项目中更多使用的并不是局部跨域的方式，而是安全框架支持的跨域配置
如果项目的预算不高，也可使用全局配置类或者全局过滤器

项目记得有 spring-boot-starter-web 的依赖

Vue.js项目

创建项目方式如下

注意！ Use the default project setup 选项被选中时，创建的是Vue3项目。不选中，则会在创建项目时在命令行中自行选择

下载 axios

npm i axios -S

vue.config.js 配置文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:9090/', //接口域名
        changeOrigin: true,             //是否跨域
        pathRewrite: {                  //路径重置
          '^/api': ''
        }
      }
    }
  }
})