前端vue＋axios訪問后臺。已處理過跨域問題(前端埠8080，后臺埠7777)，正常介面資料接受發送都沒有問題，今天后臺寫了了檔案下載的功能(回傳檔案流)，前端使用axios下載時提示Access-Control-Allow-Origin，不明白為何又跨域了，不想使用a標簽直接下載檔案(我使用的是token，a標簽無法攜帶token驗證)
Java代碼跨域代碼
/**
* 對跨域提供支持
*/
@Override
protected boolean preHandle(ServletRequest request, ServletResponse response) throws Exception {
HttpServletRequest httpServletRequest = (HttpServletRequest) request;
HttpServletResponse httpServletResponse = (HttpServletResponse) response;
httpServletResponse.setHeader("Access-control-Allow-Origin", httpServletRequest.getHeader("Origin"));
/*httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");*/
httpServletResponse.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PUT,DELETE");
httpServletResponse.setHeader("Access-Control-Allow-Headers", httpServletRequest.getHeader("Access-Control-Request-Headers"));
// 跨域時會首先發送一個option請求，這里我們給option請求直接回傳正常狀態
if (httpServletRequest.getMethod().equals(RequestMethod.OPTIONS.name())) {
httpServletResponse.setStatus(HttpStatus.OK.value());
return false;
}
return super.preHandle(request, response);
}
vue代碼
async getCodeList () {
this.axios({
method: 'post',
url: '/code/generator?tables=sys_user',
responseType: 'blob'
}).then(res => {
let data = res.data
if (!data) {
return
}
let url = window.URL.createObjectURL(new Blob([data]))
let a = document.createElement('a')
a.style.display = 'none'
a.href = url
a.setAttribute('download', 'excel.xls')
document.body.appendChild(a)
a.click()
window.URL.revokeObjectURL(a.href)
document.body.removeChild(a)
}).catch((error) => {
console.log(error)
})
const { data: res } = await this.$http.get('/code/listData', {
params: {
limit: this.queryInfo.limit,
tableName: this.queryInfo.tableName,
page: this.queryInfo.page
}
})
報錯
Access to XMLHttpRequest at 'http://127.0.0.1:7777/code/generator?tables=sys_user' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
用postman測驗過這個介面，可以正常下載檔案
uj5u.com熱心網友回復：
這是跨域問題，參考以下鏈接https://blog.csdn.net/jiangyu1013/article/details/84957502
uj5u.com熱心網友回復：
跨域問題我已經解決了，現在請求資料都正常不會提示跨域，就是下載檔案提示了跨域
uj5u.com熱心網友回復：
現在這個錯誤提示就是跨域請求的問題。你先好好理解一下CORS的內部機制吧。
https://www.ruanyifeng.com/blog/2016/04/cors.html
uj5u.com熱心網友回復：
不好意思啊，我還是不太明白我現在該怎么解決
uj5u.com熱心網友回復：
你的前端是部署在什么上面的？如果是使用的nginx的話，可以配置代理，類似這樣的配置
location /前臺使用后臺的路徑/ {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_pass 對應后臺的URL地址/;
}
這樣前端其實只有一個域
這種操作會比較正規，不應該讓用戶察覺到整個專案的結構
uj5u.com熱心網友回復：
說明你沒好好看文章，文章里面都告訴你解決方案了，只是你不細心看，或者沒理解。
你之前改好的跨域問題是針對于簡單請求的，現在是針對非簡單請求的，你的前端要用PUT發送一個自定義頭資訊X-Custom-Header。
uj5u.com熱心網友回復：
這么配置有問題嗎？我把Java中的跨域代碼洗掉了，所有的請求都跨域了，Java中的跨域代碼不刪的話問題和標題描述一致
server {
listen 8888;
server_name localhost;
location /{
proxy_pass http://127.0.0.1:8081;#VUE專案
}
location /api{
proxy_pass http://127.0.0.1:7777;#后臺介面
}
}
uj5u.com熱心網友回復：
提示說的很清楚了：因為被請求的資源沒有設定 Access-Control-Allow-Origin
你在后臺設定回傳Header里加 Access-Control-Allow-Origin
uj5u.com熱心網友回復：
有這個設定
uj5u.com熱心網友回復：
用Chrome或Fiddler抓包看看回應Header里有沒有uj5u.com熱心網友回復：
使用這個配置的時候，前端代碼訪問后端的時候就不會在訪問7777埠了，全部訪問8888
是這樣處理的吧
uj5u.com熱心網友回復：
是的，Vue，和介面都走8888埠
uj5u.com熱心網友回復：
a標簽為啥無法攜帶token?看你描述應該沒做檔案服務器之類的東西吧,controller里寫個方法將檔案流回應出去不就行了?
uj5u.com熱心網友回復：
a標簽跳轉不是就一個url怎么攜帶？這個下載我希望一定要有權限的用戶才能下載，所以需要攜帶token，還沒做檔案服務器
uj5u.com熱心網友回復：
url帶token不是正常操作嗎...你們token存cookie里或者引數明文傳遞后臺都能拿到吧,當然你只能從header里拿那就可能無能為力了,一般權限驗證框架這三種基本都支持的.
下載檔案有很多騷操作的,類似ajax下載這種,就用隱藏的iframe訪問,服務端直接回應流到前端
參考下
https://blog.csdn.net/L1481333167/article/details/81705769
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/132019.html
標籤：Web 開發
上一篇：求助 JS表格添加后按鈕失效