vue的跨域配置

最新推荐文章于 2024-08-12 13:22:54 发布

huoxue_2012

最新推荐文章于 2024-08-12 13:22:54 发布

阅读量491

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/huoxue_2012/article/details/103136870

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

当我们从一个域名访问另一个域名的时候，就会发送跨域请求，例如，前后端分离的项目开发时，前端ip+port为 localhost:8080，后端为localhost:8081，这个时候就需要跨域。

跨域会产生一个安全问题，例如，我先访问了银行的网页，cookie中存有银行访问的信息，cookie信息会被放入到请求头里面以便下次能够自动识别出你是已登录用户，然后我又去浏览了其它含有病毒的网站，我们叫它evil网站，那么evil网站可能就会拿着我们的cookie信息去访问银行网页，甚至转走我们的钱，为了防止这种情况，浏览器有一个同源策略，大概意思就是只有最初访问的那一个源头（ip+port）可以访问它，其它的请求都不允许访问，这样就解决了该安全问题。但是这对于正人君子想要进行正当的跨域请求就造成了阻碍，所以我们给正人君子配了一把钥匙，就是本文要说的跨域配置：

一、在vue项目的config/index.js中找到 proxyTable 来添加跨域支持：

//添加跨域支持
    proxyTable: {
      '/api':{
        target : 'http://localhost:8123',  //目标接口域名
        changeOrigin : true,    //是否跨域
        pathRewrite : {
          '^api' : '/'     //重写接口
        }
      }
    }

如果我的请求是 http://localhost:8080/api/abc 将被替换为 http://localhost:8123/abc ,api及之前的部分都被替换为 target 了。

二、注意一下是否在main.js中配置了反向代理的默认访问路径，如：

// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
axios.defaults.baseURL = 'http://localhost:8123/api'

如果是这样的话，proxyTable 中的路径就要考虑这个 baseURL。注意，这里是 defaults ,而不是 default 。

三、在Rest接口中配置 SpringMVC 的 @CrossOrigin 注解

@CrossOrigin 它表示当前接口支持CORS规范，CORS叫做跨源资源共享，是由大多数浏览器实现的W3C规范，如 @CrossOrigin(origins = "http://domain2.com", maxAge = 3600)：

//origins表示允许的域名列表，maxAge 表示支持持续响应的时间
@CrossOrigin(origins = "http://domain2.com", maxAge = 3600)
    @PostMapping(value = "/api/login")
    public Result login(@RequestBody User requestUser) {