标签：jquery method stack common 自定义 服务 cal 前缀 evel
最近技术栈改为彻底的前后端分离，不是webapp那一套，所以碰到了跨域问题，刚开始是通过配置cors来解决，事实上也确实可以了，但是传自定义header头的时候，因为是复杂请求，所以一次请求两次动作，导致拿不到header头的值，因而采用代理的方式来解决跨域问题，先贴出之前的cors（cors这套，axios或者jqueryAjax都需要允许携带cookie发送请求）。
<dependency> <groupId>com.thetransactioncompany</groupId> <artifactId>cors-filter</artifactId> <version>2.5</version> </dependency>
package org.kosoku.commonfast.config.cors; import org.springframework.stereotype.Component; import javax.servlet.*; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @Component public 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接口前缀，代理会这样拼接代理 http://192.168.31.178:60000/common （vue中的配置也是这样拼接）
proxy_pass 配置的路径，不要在后面加/
location /common { proxy_pass http://192.168.31.178:60000; }
vue项目中的配置：
config目录下的index.js
// 代理配置表，在这里可以配置特定的请求代理到对应的API接口 proxyTable: { ‘/api‘: { // 匹配所有以 ‘/api‘开头的请求路径 target: ‘http://localhost:4000‘, // 代理目标的基础路径 // secure: false, // 如果是https接口，需要配置这个参数 changeOrigin: true, // 支持跨域 pathRewrite: { // 重写路径: 去掉路径中开头的‘/api‘ ‘^/api‘: ‘‘ } } },
nginx下的html和vue（开发环境以及nginx下的生产版本），引用的资源直接写/common下的路径就行了。
vue需要重启才能应用配置文件。
参考：
https://blog.csdn.net/FullStackDeveloper0/article/details/85004667
https://www.jianshu.com/p/5ef2b17f9b25
标签：jquery method stack common 自定义 服务 cal 前缀 evel
原文地址：https://www.cnblogs.com/kinome/p/12468355.html
