axios 跨域解决方案

最近上手新项目，前端用基于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 }

View Code

　　启动起来，自然就跟着加载上了，因为有注解啊。

　　然后前端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~~~~~~

axios 跨域解决方案

猜你喜欢