Vue跨域访问后端接口问题解决_vue-admin-template 跨域请求

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");
    }
}