Vue跨域访问后端接口问题解决
VUE訪問接口的時(shí)候,很可能出現(xiàn)跨域請求,從而被提供接口的服務(wù)器拒絕,下面這篇文章主要給大家介紹了關(guān)于Vue如何解決跨域問題的相關(guān)資料,需要的朋友可以參考下
什么是跨域
跨域指瀏覽器不允許當(dāng)前頁面的所在的源去請求另一個(gè)源的數(shù)據(jù)。源指協(xié)議,端口,域名。只要這個(gè)3個(gè)中有一個(gè)不同就是跨域。 這里列舉一個(gè)經(jīng)典的列子:
#協(xié)議跨域
http://a.baidu.com訪問https://a.baidu.com;
#端口跨域
http://a.baidu.com:8080訪問http://a.baidu.com:80;
#域名跨域
http://a.baidu.com訪問http://b.baidu.com;
通常在不同服務(wù)器訪問過程中可能會(huì)遇到跨域問題,也就是口頭上常說的策略同源問題 CORS
出現(xiàn)跨越一般就是判斷三個(gè)地方,http協(xié)議,請求地址,端口號,三者若有一處不相同,那么就會(huì)出現(xiàn)跨域,解決這個(gè)問題就要配置一個(gè)代理服務(wù)器,通過代理服務(wù)器實(shí)現(xiàn)跨域請求
問題代碼
前端代碼
使用了Vue Admin Template
# just a flag ENV = 'development'# base api VUE_APP_BASE_API = 'http://localhost:8201'?遠(yuǎn)程訪問后端的地址為:http://localhost:8201
前端地址為:http://localhost:9528
?請求的URI的地址
import request from '@/utils/request'export function login(data) {return request({url: '/admin/user/login',method: 'post',data}) }export function getInfo(token) {return request({url: '/admin/user/info',method: 'get',params: { token }}) }export function logout() {return request({url: '/admin/user/logout',method: 'post'}) }后端代碼
@RestController @RequestMapping("/admin/user") @Slf4j public class UserController {@PostMapping("/login")public R login(@RequestBody Map<String, Object> map) {// 查詢數(shù)據(jù)庫log.info(map.toString());return R.ok().data("token", "admin-token");}@GetMapping("/info")public R info(@RequestBody Map<String, Object> map) {// 查詢數(shù)據(jù)庫log.info(map.toString());return R.ok().data("roles", "[admin]").data("introduction", "I am a super administrator").data("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif").data("name", "Super Admin");} }問題復(fù)現(xiàn)
問題分析
看到這個(gè)狀態(tài)碼CORS error可以知道這是跨域訪問出錯(cuò),當(dāng)然這個(gè)狀態(tài)碼也不是絕對的,也有可能是后端接口出了問題。
以前是前端和后端是一個(gè)項(xiàng)目,所以才沒遇到這個(gè)問題。
跨域問題:當(dāng)前端使用 axios給后端發(fā)送遠(yuǎn)程異步請求的時(shí)候,會(huì)遇到跨域問題!
要求后端和前端要保持ip【域名】、port、協(xié)議一致。前端和后端只要這三個(gè)有一個(gè)不一致就會(huì)有跨域問題。
解決方案
全局解決方案:
gateway,以后有空的時(shí)候完善一下這塊解決方案,現(xiàn)在只是提一下這個(gè)方法。
局部解決方案:
只需要在后端的controller類上寫@CrossOrigin注解就可以
@RestController @RequestMapping("/admin/user") @Slf4j @CrossOrigin public class UserController {@PostMapping("/login")public R login(@RequestBody Map<String, Object> map) {// 查詢數(shù)據(jù)庫log.info(map.toString());return R.ok().data("token", "admin-token");}@GetMapping("/info")public R info(@RequestBody Map<String, Object> map) {// 查詢數(shù)據(jù)庫log.info(map.toString());return R.ok().data("roles", "[admin]").data("introduction", "I am a super administrator").data("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif").data("name", "Super Admin");} }總結(jié)
以上是生活随笔為你收集整理的Vue跨域访问后端接口问题解决的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: airpods pro是按压还是触摸_苹
- 下一篇: Django Vue 跨域问题