VUE訪問接口的時候,很可能出現跨域請求,從而被提供接口的服務器拒絕,下面這篇文章主要給大家介紹了關于Vue如何解決跨域問題的相關資料,需要的朋友可以參考下

什么是跨域

跨域指瀏覽器不允許當前頁面的所在的源去請求另一個源的數據。源指協議，端口，域名。只要這個3個中有一個不同就是跨域。 這里列舉一個經典的列子：

#協議跨域
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；

通常在不同服務器訪問過程中可能會遇到跨域問題，也就是口頭上常說的策略同源問題 CORS

出現跨越一般就是判斷三個地方，http協議，請求地址，端口號，三者若有一處不相同，那么就會出現跨域，解決這個問題就要配置一個代理服務器，通過代理服務器實現跨域請求

問題代碼

前端代碼

使用了Vue Admin Template

# just a flag ENV = 'development'# base api VUE_APP_BASE_API = 'http://localhost:8201'

?遠程訪問后端的地址為：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) {// 查詢數據庫log.info(map.toString());return R.ok().data("token", "admin-token");}@GetMapping("/info")public R info(@RequestBody Map<String, Object> map) {// 查詢數據庫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");} }

問題復現

問題分析

看到這個狀態碼CORS error可以知道這是跨域訪問出錯，當然這個狀態碼也不是絕對的，也有可能是后端接口出了問題。

以前是前端和后端是一個項目，所以才沒遇到這個問題。

跨域問題:當前端使用 axios給后端發送遠程異步請求的時候,會遇到跨域問題!

要求后端和前端要保持ip【域名】、port、協議一致。前端和后端只要這三個有一個不一致就會有跨域問題。

解決方案

全局解決方案：

gateway,以后有空的時候完善一下這塊解決方案，現在只是提一下這個方法。

局部解決方案：

只需要在后端的controller類上寫@CrossOrigin注解就可以

@RestController @RequestMapping("/admin/user") @Slf4j @CrossOrigin public class UserController {@PostMapping("/login")public R login(@RequestBody Map<String, Object> map) {// 查詢數據庫log.info(map.toString());return R.ok().data("token", "admin-token");}@GetMapping("/info")public R info(@RequestBody Map<String, Object> map) {// 查詢數據庫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");} }

總結

以上是生活随笔為你收集整理的Vue跨域访问后端接口问题解决的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。