跨域

浏览器规定，不同域之间之间想要通信，会出现资源不共享问题（跨域问题）。

例如浏览器控制台报错：

Access to fetch at 'https://www.taobao.com/' from origin 'https://www.baidu.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

前端请求服务器数据时，常会出现跨域问题。解决方案如下：

1、CORS 修改响应头

根据浏览器控制台报错提示： 给服务器的响应头里面加上Access-Control-Allow-Origin

设置响应头：

//（允许任何域名访问）
res.header("Access-Control-Allow-Origin","*")

2、jsonp

通过href src请求下来的js脚本，css文件 ，img图片文件，视屏文件不存在跨域问题。通过ajax请求下来的文件才有跨域问题。

jsonp ：利用src可以实现的跨域来。利用callback函数，动态生成script标签，来实现跨域获取数据。

<script src="不同域的url地址"></script>

3、中间服务器代理

因为跨域这个问题，是因为浏览器的同源策源而产生的。服务器之间没有跨域的问题。所以可以使用中间代理服务器，来作为一个桥梁来解决跨域资源不共享问题。

4、vue反向代理 （原理就是中间服务器代理） 在vue配置文件 vue.config.js文件里面去配置代理 ：proxy。

devServer：{
    //设置代理
    proxy:{
    "/api":{//指明需要进行代理的地方
        target:"目标服务器的地址url",
        ws：true，//是否启用websockets
        changOrigin:true,//开启代理：会在本地生成一个虚拟服务器，通过虚拟服务器去访问目标服务器，解决跨越资源不共享的问题
        pathRewrite:{
            "^/api":"/"  //路径重写
            // api/login  重写为：  目标服务器的地址url/login
        }
    }
    }
}