【笔记】vue和ssm开发接口联调跨域问题

爬了两个小时的大坑

前端在github上拉了个vue项目，由于从来没正式学过vue，跨域这个问题一直困扰了很久。

目前暂时能用的解决方案（开发环境）就是：

• 前端在vue.config.js中加入代理。

  devServer: {
  
  port: 8085,
  
  open: true,
  
  // proxy: 8080,
  
  proxy: {
  
  '/api': {
  
  target: 'http://localhost:8080',
  
  ws: true,
  
  changeOrigin: true,
  
  pathRewrite: {
  
  // '^/api': '/api' // 这种接口配置出来 http://XX.XX.XX.XX:8083/api/login
  
  '^/api': '' //这种接口配置出来 http://XX.XX.XX.XX:8083/login
  
  }
  
  }
  
  }
  
  },

• 将封装的axios请求中的baseURL改为'/api'，这样子所有请求就会转发到target/api，pathRewrite可以把api去掉。

• 后端spring-mvc加入
  
  mvc:cors
  
  <mvc:mapping path="/**"
  
  allowed-origins="http://127.0.0.1:8085,http://localhost:8085"
  
  allowed-methods="POST,GET, OPTIONS,DELETE,PUT"
  
  allowed-headers="Content-Type,ContentType,Access-Control-Allow-Headers, Authorization, X-Requested-With Access-Control-Allow-Origin"
  
  allow-credentials="true"/>
  
  </mvc:cors>