# **跨域** 由于开发中前端工程使用webpack启了一个服务，所以前后端并不在一个端口下，必然涉及到跨域： > XMLHttpRequest会遵守同源策略(same-origin policy). 也即脚本只能访问相同协议/相同主机名/相同端口的资源, 如果要突破这个限制, 那就是所谓的跨域, 此时需要遵守CORS(Cross-Origin Resource Sharing)机制。 解决跨域分三种： **一、server端是自己开发的，这样可以在在后端增加一个拦截器** ``` @Component publicclass CommonIntercepter implements HandlerInterceptor { privatefinal Logger logger = LoggerFactory.getLogger(this.getClass()); @Override public boolean preHandle(HttpServletRequest request,                              HttpServletResponse response, Object handler) throws Exception { //允许跨域,不能放在postHandle内         response.setHeader("Access-Control-Allow-Origin", "\*"); if (request.getMethod().equals("OPTIONS")) {             response.addHeader("Access-Control-Allow-Methods", "GET,HEAD,POST,PUT,DELETE,TRACE,OPTIONS,PATCH");             response.addHeader("Access-Control-Allow-Headers", "Content-Type, Accept, Authorization");         } returntrue;     } } ``` > response.setHeader("Access-Control-Allow-Origin", "\*"); 主要就是在Response Header中增加 "Access-Control-Allow-Origin: \*" ``` if (request.getMethod().equals("OPTIONS")) { response.addHeader("Access-Control-Allow-Methods", "GET,HEAD,POST,PUT,DELETE,TRACE,OPTIONS,PATCH"); response.addHeader("Access-Control-Allow-Headers", "Content-Type, Accept, Authorization");         } ``` 由于我们在前后端分离中集成了shiro，因此需要在headers中自定义一个'Authorization'字段，此时普通的GET、POST等请求会变成preflighted request，即在GET、POST请求之前会预先发一个OPTIONS请求。 **二、server端不是自己开发的，可以在前端加proxyTable。** 不过这个只能在开发的时候用，后续部署，可以把前端项目作为静态资源放到后端，这样就不存在跨域 遇到了网上很多人说的，proxyTable无论如何修改，都没效果的现象。 1、（非常重要）确保proxyTable配置的地址能访问，因为如果不能访问，在浏览器F12调试的时候看到的依然会是提示404。 并且注意，在F12看到的js提示错误的域名，是js写的那个域名，并不是代理后的域名。（l楼主就遇到这个问题，后端地址缺少了查询参数，代理设置为后端地址，然而F12看到的错误依然还是本地的域名，并不是代理后的域名） 2、就是要手动再执行一次npm run dev 三、服务端运维端nginx解决跨域 设置允许全局跨域 ``` #设置允许全局跨域 server { 　　 .... add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET,POST'; add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; } ``` 在nginx中加上跨域接口处理防止跨域 ``` # 高德地图api防止跨域 location ^~ /amap { rewrite ^/amap/(.*)$/$1 break; proxy_pass https://restapi.amap.com; # 后台api接口地址 } # 腾讯地图api防止跨域 location ^~ /map.qq { rewrite ^/map.qq/(.*)$/$1 break; proxy_pass https://apis.map.qq.com; # 后台api接口地址 } ```