前后端分离开发中的跨域问题

一、什么是跨域问题？

跨域（CORS）是指不同域名之间相互访问。是指浏览器不能访问其他网站的脚本，它是由浏览器的同源策略造成的，同源策略是浏览器对于JavaScript所定义的安全限制策略。
由于现在在开发中大多数都是前后端分离的项目，所以会导致跨域问题，下面我们先了解跨域再解决跨域问题。
同源策略：是指协议，域名，端口都要相同，其中有一个不同就会产生跨域问题。

二、什么情况下会遇到跨域问题呢？

如果不是同一协议、同一IP地址、同一端口号，这三个条件如果有一个不满足就会产生跨域问题。当协议、IP地址和端口号相同时，就可以访问不同的文件。

举一个例子：

　　在前后端分离的项目中，前端是拥有一个访问链接的，假设是http://localhost:9528/；同样的后端也是有的，如http://localhost:8021/，那么就登录功能来讲，前端给出的function是：

export function login(data) {
  return request({
    url: '/admin/acl/index/login',
    method: 'post',
    data
  })
}

　　那么，我们后端要做的就是写一个Controller，并且在@PostMapping中将参数写为"/admin/acl/index/login"，这样一来便完成了前后端的连接请求访问，但是此时我们会发现我的后端真正在调用的时候其实访问的url是http://localhost:8021/admin/acl/index/login，而不是前端所期望的http://localhost:9528/admin/acl/index/login，产生了不一致，也就是我们所说的跨域问题，下图就是因为跨域问题在前端控制台产生的错误信息：

 

　　对于这种情况来讲，我们的http是相同的，localhost都是本地，也是相同的，但是其后面的端口号就不同了，因此就导致了跨域问题。

三、如何解决跨域问题？

这里说一种最简单的解决方式：就是给我们所写的Controller类上加一个注解@CrossOrigin即可解决跨域问题。

如下所示：

@Api(tags = "登录接口")
@RestController
@RequestMapping("/admin/acl/index")
@CrossOrigin // 用于解决跨域问题
public class IndexController {
    /**
     * 请求登录的login
     * @return
     */
    @ApiOperation("登录")
    @PostMapping("login")
    public Result login(){
        Map<String, String> map = new HashMap<>();
        map.put("token", "admin - token");
        return Result.ok(map);
    }