vue跨域配置

在vue项目中经常遇到跨域的情况,这时我们可以在vue.config中设置server选项,这时vue cli会开启一个代理服务器接收服务器的请求


代理服务器图示.png

由于浏览器同源策略的限制,非同源间无法共享数据,而代理服务器相当于中介的存在,由于服务器间不通过ajax交换数据,则不存在同源策略限制,所以可以帮助前端实现跨域,但是代理解决跨域的方法,多用于辅助前端开发。

 server:{
    host:'localhost',
    port:8080,
    proxy:{
      "/api":{
        target:"http://api-manager.marsview.cc",
        changeOrigin: true,
      }
    }
  }

上述代码中,proxy中的配置值为对象,键名为对应的请求前缀,键值为配置项

请求前缀

请求前缀帮助前端区分是否进行服务器请求。如果请求地址为本地拥有的路径,则优先从本地查找文件,而不会发起请求。

配置项

target:代理的服务器地址,不要加斜杠
changeOrigin:默认为true,是否更改源的host地址,即:请求target接口时,以相同的源“欺骗”服务器。为false时则以实际请求的源地址请求。
pathRewrite:值为一个对象,键名为正则,键值为替换的内容,一般是空字符串。是否重写路径。由于请求前缀的关系,请求时会添加上请求前缀,路径就会错,所以需要添加这个属性,替换请求前缀为空字符串。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容