对前后端分离的一些经验记录

更新：之所以在开启cors的时候，axios需要携带cookie、后端cors filter需要放通cookie，就是因为jsessionId需要携带上去（cors这套跨域还得设置response header里的允许的请求头，就是 response.setHeader("Access-Control-Allow-Credentials", "true"); 这段）；同理：即便使用代理跨域，axios也需要允许携带cookie（因为jsessionId需要在header里验证），jquery ajax倒是还没出过问题。

最近技术栈改为彻底的前后端分离，不是webapp那一套，所以碰到了跨域问题，刚开始是通过配置cors来解决，事实上也确实可以了，但是传自定义header头的时候，因为是复杂请求，所以一次请求两次动作，导致拿不到header头的值，因而采用代理的方式来解决跨域问题，先贴出之前的cors（cors这套，axios或者jqueryAjax都需要允许携带cookie发送请求）。

com.thetransactioncompany cors-filter 2.5

package org.kosoku.commonfast.config.cors;import org.springframework.stereotype.Component;import javax.servlet.*;import javax.servlet.javax.servlet.java.io.IOException;@Componentpublic class CORSFilter implements Filter { @Override public void init(FilterConfig filterConfig) throws ServletException { }// Access-Control-Allow-Origin 不能设置为 * 否则跨域时 sessionId 会发生改变，且设置了支持跨域，就不能设置为 * 了// 需要允许特定头部字段，比如 Access-Control-Allow-Headers 设置为 x-token// 前端axios不能关闭cookie跨域，Access-Control-Allow-Credentials也要设置为true，允许cookie跨域，否则将无法获取x-token头部信息 @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { HttpServletRequest request = (HttpServletRequest) servletRequest; HttpServletResponse response = (HttpServletResponse) servletResponse; response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin")); response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "x-requested-with"); response.setHeader("Access-Control-Allow-Headers", "x-token"); response.setHeader("Access-Control-Allow-Credentials", "true"); //是否支持cookie跨域 true为支持 //添加这行代码，让OPTIONS请求通过 if (request.getMethod().equals("OPTIONS")) { response.setStatus(HttpServletResponse.SC_OK); } filterChain.doFilter(servletRequest, servletResponse); } @Override public void destroy() { }}

事实上，只需要配置代理就可以了，nginx代理配置如下（可以作用于nginx的html下的页面，webpack打包的项目也可以放在里面）：

nginx根目录下的conf/nginx.conf

这里的代理是我的应用服务器地址，/common是我的api接口前缀，代理会这样拼接代理 ​​/common { proxy_pass 节点下的 devServer 下（参考webpack文档即可）：

// 代理配置表，在这里可以配置特定的请求代理到对应的API接口 proxyTable: { '/api': { // 匹配所有以 '/api'开头的请求路径 target: '// 代理目标的基础路径 // secure: false, // 如果是 changeOrigin: true, // 支持跨域 pathRewrite: { // 重写路径: 去掉路径中开头的'/api' '^/api': '' } } }

nginx下的html和vue（开发环境以及nginx下的生产版本），引用的资源直接写/common下的路径就行了。

vue需要重启才能应用配置文件。

参考：

​​https://jianshu.com/p/5ef2b17f9b25​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。