前端解决跨域

常用解决跨域的方式有：

1. cors 后端解决跨域（不安全）
2. jsonp 前端解决跨域，但需要后端配合（利用script标签的src熟悉，但只能解决get请求）
3. 代理服务器
   1. nginx 需要会一些后端知识
   2. vue-cli 利用vue脚手架自带的方法 

1.cors 后端解决跨域

CORS是跨域资源共享（Cross-Origin Resource Sharing），以 ajax 跨域请求资源，支持现代浏览器，IE支持10以上

 在请求头添加【Access-ContrAlol-low-Origin:*】此处*，表示接受任意域名的请求，可以换成具体地址

跨域资源共享 CORS 详解

2.jsonp 前端解决跨域

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

<script type="text/javascript">
    function text_jsonp(req){
        // 创建script的标签
        var script = document.createElement('script');
        // 拼接 url
        var url = req.url + '?callback=' + req.callback.name;
        // 赋值url
        script.src = url;
        // 放入头部
        document.getElementsByTagName('head')[0].appendChild(script);
    }
</script>

 3.VUE中常用proxy来解决跨域问题

编写 vue.config.js 配置具体代理规则

方法一

module.exports = {
   devServer:{
       proxy:"url" //代理目标的基础路径
   }
}

说明：

1.优点:配置简单，请求资源时直接发送给前端(8080).
2.缺点:不能配置多个代理，不能灵活的控制请求是否走代理
3.工作方式:当请求了前端不存在的资源时，那么该请求会会转发给服务器(优先匹配前端资源)

方法二

    module.exports = {
        devServer:{
            proxy:{
                "/api1":{  //配置所有以"/api1"开头的请求路径
                    target:'url' , //代理目标的基础路径
                    changeOrigin:true,
                    pathRewrite:{'^/api1':''}  //重定向
                },
                "/api2":{...}
            }
        }
    }
    /* 
        changeOrigin:true   服务器收到的请求头中的host为  ·代理目标的基础路径·
        changeOrigin:false  服务器收到的请求头中的host为  ·本身的基础路径·
        changeOrigin:true 是默认值
    */

说明：

1.优点:可以配置多个代理，可以灵活的控制请求是否走代理
2.缺点:配置略微繁琐，请求资源时必须加前缀