Vue使用axios请求出现问题,如图:
原因就是跨域请求(协议,地址,端口有一个不一样)
解决办法:
- jsonp(不考虑,因为我需要post请求)
- 服务器设置允许跨域请求(本文使用)
- 使用代理服务器(难道代理服务器可以不用设置跨域请求?也是要设置的)
这样以来,问题就是如何设置允许跨域请求 。
我使用springboot + spring-security + jwt,设置允许跨域请求的步骤:
1、SecurityConfig中设置 http.cors();
2、WebMVCConfig添加
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
完成2步骤后,再请求,可以访问了