一.前端邏輯(基於elementui)
找到我們設定埠的index.js索引檔案,定位到proxytable屬性,在其中新增反向**
**格式如下:
proxytable:
'/api':
},},
然後在我們的main.js中對axios配置乙個預設全域性屬性(需先配置並使用axios),格式如下
import axios from 'axios'
//給vue新增乙個全域性屬性vue.prototype.$http=axios;
axios.defaults.baseurl='/api'//把所有使用axois傳送的請求前面加上/api
這樣我們所有對後端的跨域請求都可以實現了。
二,後端邏輯
直接在basic.congfig資料夾中增加乙個globalcorsconfig檔案,檔案內容如下
@configuration
public class globalcorsconfig
}
兩種配置一種即可實現跨域,建議兩種一起使用防止出錯。注:如果跨域完成後發現請求被404,如果後端的controller沒問題嗎,那可能是我們的main.js把axios的配置寫在了import上面導致他不能把/api解析成想要的位址。 前後端分離與跨域的解決方案
前後端分離與跨域的解決方案 cors的原理 vue中axios傳送options預檢請求的原因及如何通過 ps access control allow origin 該字段是必須的,表示接受任意網域名稱的請求,還可以指定網域名稱。access control allow credentials 該...
前後端分離專案,請求跨域解決
前端傳送請求,產生跨域問題 created 控制台報錯 在後端設定允許跨域請求 package com.demo.demobackend.config import org.springframework.context.annotation.bean import org.springframew...
前後端分離跨域問題解決方案
因為最近在學習vue和springboot.用到了前後端分離.前端webpack打包執行的時候會啟動nodejs的伺服器占用8080埠,後端springboot自帶tomcat啟動占用1111埠 我自己設定的 導致前端請求的ajax到後台會產生跨域問題.然後自己試了試發現有2種辦法都可以解決.1 p...