最近上手新项目,前端用基于nodejs的vue,碰到了个棘手问题,就是npm服务怎么访问本地项目,首先想到跨域问题,然而对网络知之甚少,唉,只能硬着头皮干,不过还好皇天不负有心人,最终搞出来来了。
首先项目框架用的是微服务spring boot,这个还是挺好用的,一键启动。我在这加了一个filter,代码如下:
1 @Component 2 public class CorsFilter implements Filter { 3 @Override 4 public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { 5 HttpServletResponse response = (HttpServletResponse) res; 6 response.setHeader("Access-Control-Allow-Credentials","true"); 7 response.setHeader("Access-Control-Allow-Origin", "http://localhost:8089"); 8 response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH"); 9 response.setHeader("Access-Control-Max-Age", "3600"); 10 response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 11 response.setHeader("Access-Control-Expose-Headers", "Location"); 12 chain.doFilter(req, res); 13 } 14 15 @Override 16 public void init(FilterConfig filterConfig) { 17 System.out.println("-----------------跨域过滤器已经启动-----------------"); 18 } 19 20 @Override 21 public void destroy() {} 22 }
启动起来,自然就跟着加载上了,因为有注解啊。
然后前端vue,是个老哥封装好了的axios,但是吧有坑,不过不怕,vue过滤器(axios.interceptors.request.use)中增加下方代码,立马解决问题,嘿嘿。
1 config.headers = { 2 'Content-Type':'application/x-www-form-urlencoded' 3 //'Content-Type':'application/json;charset=utf-8' 4 }
也就是网络请求头,这个可以自行百度,不过我试了被我注释掉的application/json;charset=utf-8,不能用,依旧是只要请求就会报错403。这个问题还有待考察和请教。
到这儿跨域问题应该就解决了,已经可以请求到数据了,不过呢还有一点小麻烦,前端向后端发送参数时却始终报错,不是415,就是400,还有就是请求过去了,参数是null,或者是空字符串,后来也是通过多方查找和测试,最终确定axios有个QS模块,只要把data包裹即可,后端依旧用@RequestParam接收。OK~~~~~~