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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。