proxyTable解决跨域问题
proxyTable是什么?
vue-cli提供的解决vue开发环境下跨域问题的方法,proxyTable的底层使用了http-proxy- middleware(https://github.com/chimurai/http-proxy-middleware),它是http代理中间件,它依赖node.js, 基本原理是用服务端代理解决浏览器跨域:
通过proxyTable由node服务器代理请求 http://localhost:31001(服务端不存在跨域问题)
为什么会出现跨域问题
原因:浏览器的同源策略不允许跨域访问,所谓同源策略是指协议、域名、端口相同。
解决方法1:采用proxyTable解决。
1.修改api方法中url的定义
import http from '@/base/api/public'
import querystring from 'querystring'
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre;
export const page_test= id => {
return http.requestQuickGet(apiUrl+'/cms/user/get/'+id)
}
2.在config/index.js下配置proxyTable。
proxyTable: {
'/api/cms': {
target: 'http://localhost:31001',
pathRewrite: {
//把api 替换成 空字符串
'^/api': ''
}
}
解决方法2:采用java后台解决
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Autowired
private EnvConfig envConfig;
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new HandlerInterceptor() {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
throws Exception {
boolean isTrue = envConfig.getIsDev();//判断是测试服才需要解决跨域问题
if (isTrue) {
response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
response.addHeader("Access-Control-Allow-Headers",
"Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,token");
}
return true;
}
@Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
ModelAndView modelAndView) throws Exception {
}
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler,
Exception ex) throws Exception {
}
});
}
}