26、vue前端出现跨域问题，如何解决跨域？

问题：

因为浏览器的同源策略的限制问题（协议、主机、端口一致），浏览器访问非同源的网址时,会出现无法获取数据（已发请求，服务器已收到请求）,出现跨域问题

3种解决方法：

1、cors跨域(配置服务器) ：

全称 “跨域资源共享”，原理：它允许浏览器向跨源服务器，发出XMLHttpRequest请求（配置响应头Accesse-Control-Allow-Origin:"*",违背任意一条同源策略都能访问响应数据），从而克服了AJAX只能同源使用的限制。

缺点：这样会造成任何人都能向这台服务器要数据。

2、jsonp跨域：

原理：动态生成script标签，通过src引入接口地址(因为src不存在跨域的)；请求数据类型dataType为jsonp，缺陷只支持get请求，且存在一些安全隐患

3、代理服务器：

借助vue-cli脚手架开启代理服务器，在vue.config.js文件中配置proxy，原理：先请求本地服务器，本地服务器再去请求真正的后台服务器，最后本地服务器再将请求回来的数据返回给浏览器（本地服务器跟浏览器之间不存在跨域）

配置多个代理代码：

devServer: {
    proxy: {
   //灵活代理；请求前缀为/api时，走下面的代理
      '/api': {
        target: 'url',//代理服务器把请求转发给url(真正的后台服务器)
        ws: true,//用于支持websocket
        changeOrigin: true,//用于控制请求头中的host值
        //真正的服务器没有/api，所以要重写路径置空，否则找不到相应的路径
        pathRewrite: {
        //匹配以api开头的路径置空
           '^api': ''
         }
      },
   //配置多个代理；请求前缀为/demo时，走下面的代理
       '/demo': {
        target: 'url2',//代理服务器把请求转发给url2(真正的后台服务器)
        ws: true,//用于支持websocket
        changeOrigin: true,//用于控制请求头中的host值
        //真正的服务器没有/api，所以要重写路径置空，否则找不到相应的路径
        pathRewrite: {
        //匹配以api开头的路径置空
           '^demo': ''
         }
      },
    }
  }