# **跨域** 由于開發中前端工程使用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接口地址 } ```