vue+axios+httpsevlet解決前端跨域的問題
阿新 • • 發佈：2018-12-18
一 通過webpack中的proxyTable機制，用nodejs伺服器進行轉發。但只侷限於生產環境。
proxyTable: {
'/api': {
target: 'http://172.21.73.144:30010',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
},
二 在後端httpsevlet的請求中加入
resp.setHeader("Access-Control-Allow-Origin", "*");
resp.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
resp.setHeader("Access-Control-Max-Age", "3600");
resp.setHeader("Access-Control-Allow-Headers", "Content-Type,accesstoken");
resp.setHeader("Access-Control-Allow-Credentials", "true");但axios當傳送請求時會發兩次。第一次傳送options請求。主要時驗證身份，第二次傳送具體的GET或POST請求。
而httpsevlet要在所有的請求中加上上面這段程式碼。解決方法：
1、在filter中新增。在過濾器中驗證。
2、在server()方法中新增、server方式先於其他請求方法執行，在其中起到排程的作用。
三 通過ngnix伺服器的重定向來解決跨域問題。