Vue-cli+ssm框架 axios跨域请求的问题!以及遇到的各种坑!
解决这个问题的过程还是比较曲折的,花了我一天的时间。
昨天在看vue.js框架的文档,准备实现下利用vue-cli和ssm实现前后端分离技术。
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. 写一个工具类,其中要引用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打印出来了
终于解决了啊。
上一篇: easyMock本地化搭建