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

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

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

由于是前后端分离，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的引用方式变了，应该是：

于是我意识到之前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>

之后访问就可以成功了！

console打印出来了

终于解决了啊。

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

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

配置的方式大概有3中：

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

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

配置ssm的cors

猜你喜欢