谷粒学院项目实战57——登录页面实现与跨域

在controller目录下新建LoginContreller.java.启动后端的项目。

@RestController
@RequestMapping("eduservice/user")
public class LoginController {

    @PostMapping("login")
    public R login() {
        return R.ok().data("token","admin");
    }

    @PostMapping("info")
    public R getInfo() {
        return R.ok().data("roles","admin").data("name","可爱粥").data("avatar","http://img.desktx.com/d/file/wallpaper/scenery/20170303/dfe53a7300794009a029131a062836d5.jpg");
    }
}

将前端login.js中的接口改成与后端一致。

export function login(username, password) {
  return request({
    url: 'eduservice/user/login',
    method: 'post',
    data: {
      username,
      password
    }
  })
}

export function getInfo(token) {
  return request({
    url: 'eduservice/user/info',
    method: 'get',
    params: { token }
  })
}

重新启动前端(改了配置文件的情况必须重启)。

这里报了一个Network Error,在console中查看具体的错误信息如下。

这个错误有个专业的术语：跨域问题。所谓跨域，是指通过一个地址去访问另一个地址，协议、ip、端口号不完全相同，则访问为跨域访问。本项目中前端地址为:http://localhost:9528/, 访问后端地址：http://localhost:8001/，这就是一个跨域问题。

在后端接口中添加@CrossOrigin注解允许跨域访问即可解决，也可以使用网关解决(后面讲解)。

好了，重启后台刷新页面。前方高帅。