欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-10 10:19:22
...

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

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

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

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

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

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

Vue-cli+ssm框架 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的引用方式变了,应该是:

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

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

之后访问就可以成功了!

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

console打印出来了

终于解决了啊。