一文解决前后端分离导致的跨域问题Vue+Springboot

我的vue项目创建命令：

vue init webpack project_name

vue项目创建建议和我的一致，这样才能保证项目目录文件一致。

index.js文件如图：

添加如下：

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      'api': {
        target: 'http://localhost:8088', // 这里是后端的地址
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': '' // 后端每次访问添加的前缀,比如你请求/login => /api/login
        }			 // 没有前缀需求删掉api即可
      }
    },

配置好后如图：

main.js下添加：

import qs from 'qs'
import store from './store'

axios.defaults.baseURL = 'http://localhost:8088/api' // 注意这里同上面的target
// 使请求带上凭证信息,这里是解决session不一致的问题
axios.defaults.withCredentials = true
Vue.prototype.$axios = axios

至此前端决定了跨域和session不一致的问题。

创建一个config包，创建MyConfigMvcConfig.java

添加代码如下：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class MyWebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //所有请求都允许跨域
        registry.addMapping("
                .allowedOrigins("http://localhost:8080")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETe") //允许所有方法
                .allowedHeaders("*")
                .maxAge(3600);
    }
}

至此后端的跨域问题就解决了。

我们都知道有个注解@CrossOrigin注解可以解决跨域的问题，但这个注解目前只在Get方法上起作用，post上就没用了，所以还是用上面的方法解决跨域的问题。

vue常常搭配element-ui和axios使用，axios在请求时默认将数据放入请求体里面，这样后端接受数据时只能通过注解@RequestBody，比较麻烦，不能直接在像在传表单数据那样在方法形参的形式获取，这个问题主要针对的是POST请求。

在main.js添加如下代码解决以上的问题：

import qs from 'qs'

axios.interceptors.request.use((config) => {
  if (config.method === 'post' && !config.url.includes('upload')) {
    config.data = qs.stringify(config.data)
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
  }
  return config
}, (error) => {
  return Promise.reject(error)
})

上面的代码的功能axios拦截器修改请求头，代码比较简单，但是可以看到上面同时判断了url是不是包含upload请求，这是因为我用element-ui自带组件upload组件时出现了bug，后端形参反而接受不到数据，所以这里判断了下如果包含upload就使用默认的传参方式。

对应的upload代码如下：