Vue-cli+ssm框架 axios跨域请求的问题！以及遇到的各种坑！

我不是女神ヾ 2022-05-23 12:23 285阅读 0赞

解决这个问题的过程还是比较曲折的，花了我一天的时间。

昨天在看vue.js框架的文档，准备实现下利用vue-cli和ssm实现前后端分离技术。

vue-cli 利用nodejs好不容易搭建完成，成功运行前端界面。随后添一下代码，向ssm项目发送请求并接受数据。

## **Vue具体的安装和配置是学习这篇文章：** ##

[https://blog.csdn.net/muxinxin880422/article/details/77970535?locationNum=9&fps=1][https_blog.csdn.net_muxinxin880422_article_details_77970535_locationNum_9_fps_1]

其中axios发送请求的写法有点问题，应该这么写

![70][]

由于是前后端分离，vue的运行地址是8080端口，ssm的端口我设置为8090，于是构成了跨域请求

然而运行时，vue一直报错，显示请求被拒绝

网上查找资料后，发现tomcat里的web是默认拒绝跨域访问的，要成功必须添加配置

## **配置的方式大概有3中：** ##

1. 写一个工具类，其中要引用spring的cros包

2. 配置一下spring-mvc中的网址过滤，也是要使用cros

3. 修改一下CrossOrigin的注解，然后引用

发现都是需要spring的cros包，但是我引用cros包时发现不可用。网上搜了之后发现spring 4.2之后才有cros包，才支持跨域！

于是我就在项目上升级spring，升级到4.3.8.RELEASE,然后配置cros，发现还是访问被拒绝，用了几种方式都不行。

很纳闷，网上搜了，说是旧的spring还在项目里，运行的时候，还是找的旧的spring的包,所以找不到cros。

我找了一圈后，没有在项目里发现旧的包，而且查看libraris用的也是spring4.3.8的。

然后决定重新建一个项目这样该不会有旧jar包了吧

新建项目后，运行报错：

springmvc Content type 'application/json;charset=UTF-8' not supported

居然不支持 json格式？？之前还故意调试过是支持的

查找后发现，是spring 4.3.8的版本，和jackson1.9（负责java对象转json的）不兼容。4.3搭配的jackson是2.6.5、

我将版本改成2.6.5后 饮用报错，搜了之后发现2.6的引用方式变了，应该是：

![70 1][]

## **于是我意识到之前spring4.3.8真的没起作用** ##

改了jackson版本后，这个问题没了，又出现了个错误：

# org.mybatis.spring.transaction.SpringManagedTransaction.getTimeout()  #

出现这个错误的原因主要是spring-mybatis和mybatis版本不匹配，

Mybatis改成 3.2.6  mybatis-spring改成1.2.2后，运行通过。

## **配置ssm的cors** ##

spring版本修改成4.3.8后终于可以配置cors了，我进行了2中方式的配置都成功了

方式一：使用corsconfig注解（细颗粒，作用到控制层）

首先编辑一下corsconfig 作为一个工具类

源代码：

package com.wolwo.langyage.base.util;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    /**
     * CORS configuration
     */
    @Configuration
    public class CORSConfig {
    
        @Bean
        public WebMvcConfigurer corsConfigurer() {
            return new WebMvcConfigurerAdapter() {
                @Override
                public void addCorsMappings(CorsRegistry registry) {
                    registry.addMapping("/**")
                            .allowedOrigins("http://127.0.0.1:8080,http://localhost:8080")
                            .allowedMethods("POST,GET, OPTIONS,DELETE,PUT")
                            .allowedHeaders("Content-Type,ContentType,Access-Control-Allow-Headers,Access-Control-Allow-Origin, Authorization, X-Requested-With")
                            .allowCredentials(true);
                }
            };
        }
    
    }

然后在controller里，使用一下CrossOrigin 注解就行了

方式二：在springmvc配置文件里修改

加入这个

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

之后访问就可以成功了！

![70 2][]

console打印出来了

终于解决了啊。

[https_blog.csdn.net_muxinxin880422_article_details_77970535_locationNum_9_fps_1]: https://blog.csdn.net/muxinxin880422/article/details/77970535?locationNum=9&fps=1
[70]: /images/20220523/4fa45bbbc1434b999fc9a4b20a99aa0c.png
[70 1]: /images/20220523/24d96900feac460f8b1b7d7cfde6ad13.png
[70 2]: /images/20220523/0d1ab8716efe445b82779d9c26331b2c.png