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

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

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

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

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

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


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

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

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

配置的方式大概有3中:

1. 写一个工具类,其中要引用springcros

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

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

发现都是需要springcros包,但是我引用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搭配的jackson2.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打印出来了

终于解决了啊。



Logo

前往低代码交流专区

更多推荐