(IDEA)Vue+SSM跨域传值问题总结(No ‘Access-Control-Allow-Origin‘ header is present on the requested resource)

正值毕设之际，身体频频感觉被掏空，BUG改不完，人憔悴。

闲话少说开始正题

问题描述

一、axios提示不可用

一般我们都会在main.js中声明axios模块，遇到此类问题是因为axios不是vue直接提供的插件，导出时也没有重写install方法，因此不能直接使用Vue.use('axios')来全局使用

十分感谢这位博主的分享vue中使用axios发送ajax请求_阿阿阿阿丹的博客-CSDN博客

//导入axios模块
import axios from 'axios'

//Vue.use(axios)
Vue.prototype.axios = axios

救了孩子第一命

二、跨域传值常见的操作

刚接触的时候碰到这个问题真的是头都大了(晕)，我们梳理一下基本的一些操作(每一步并不一定适用于所有小伙伴，但试试一定不会掉肉🥩)

1、修改我们前端项目根目录中的config/index.js配置文件

附上代码(能省一点事就省一点)

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api':{
        //xxxx为你要传值的后端接口
        target:"http://localhost:xxxx",
        changeOrigin:true,
        pathRewrite:{
          '^/api':""
        }
      }
    },

2、在后端的spring-mvc.xml文件中添加配置

    <mvc:cors>
        <mvc:mapping path="/**"
                     allowed-origins="*"
                     allowed-methods="POST,GET,OPTIONS,DELETE,PUT,PATCH"
                     allowed-headers="Content-Type,Access-Control-Allow-Origin,Authorization,X-Requested-With"
                     allow-credentials="true"/>
    </mvc:cors>

3、在controller中使用注解配置

我以自己的一个测试文件为例，主要是@，方法前的@ResponseBody和@RequestParam(或@RequestBody)使用时要正确

import org.springframework.web.bind.annotation.*;

//此处不使用Controller，否侧return会定向一个路径而不是返回数据
@RestController
@RequestMapping("/regist")
public class RegistController {

    @CrossOrigin
    @RequestMapping(value = "/get",method = RequestMethod.XXX)
    @ResponseBody
    public String getRegist(@RequestParam("id") String id){
        System.out.println(id);
        return "success!!";
    }
}

如果@CrossOrigin不行的话可以再尝试一下下面这个

 @CrossOrigin(originPatterns = "*",allowCredentials="true",allowedHeaders = "*",methods = {RequestMethod.XXX})

4、如果以上情况都没有解决，而且你发现前端可以向后端发送数据，后端能接收到但问题出在不能返回数据时

那么恭喜少年，你的问题就是我的问题，而且这个问题是极其的坑爹

前端传值时还是会一如既往的报CORS错误，但是后端会报这个错误(可以看到我传了一个1已然接收到)

但是我后端返回的信息前端怎么也接收不到，注意到错误信息里有at org.springframework.XXXX的错误，意识到可能是导入的依赖版本出现了不兼容问题？？？

打开项目的pom.xml文件修改版本号(原来用的是5.3.4版本)

       <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aop</artifactId>
            <version>5.0.2.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>5.0.2.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context-support</artifactId>
            <version>5.0.2.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>5.0.2.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-orm</artifactId>
            <version>5.0.2.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-beans</artifactId>
            <version>5.0.2.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-core</artifactId>
            <version>5.0.2.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>5.0.2.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.0.2.RELEASE</version>

        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
            <version>5.0.2.RELEASE</version>
        </dependency>

至此 问题解决，真的困扰了太久太久导致整个人心态都出现了一些问题，希望以上方法能够帮助到各位。

如有表达不妥的地方，还请各位指出错误，大家一起进步！o(*￣▽￣*)ブ