跨域的完全讲解

什么是跨域,为什么会跨域？

产生跨域的原因，在前台的接口，不在同一个域名下就会产生跨域。

1.浏览器的限制，出于安全的考虑，产生跨域不会让请求通过，但是后端是不会报错的

2.协议，域名，端口，任何一个不一样都会产生跨域

3.请求是XHR请求，如果不是XHR请求，就算跨域，浏览器也不会报错

解决方案如下：

接口准备：http://m.kugou.com/?json=true  酷狗音乐的音乐列表接口

解决方案一：

　　使用JSONP，JSONP请求是动态的创建了script标签来进行请求，后端也需要去进行改动，否则会当做是JSON处理，从而报错，JSONP返回的

应该是一个JS。

　　JSONP请求的弊端：

　　　　1.服务器需要进行同步改动

　　　　2.JSONP只支持get请求方法

　　　　3.发送的不是XHR请求 

解决方案二： 

　　关于vue-cli 中请求代理的配置

    proxyTable: {
      "/proxy/": {
        target: "http://m.kugou.com",
        "secure": false,
        "changeOrigin": true,
        "pathRewrite": {
          "^/proxy": "" 
        },
        "headers": {
          "User-Agent": "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Mobile Safari/537.36"
        }
      }
    },

　　在项目的config/index.js中，dev里面有个 proxyTable，在里面写上代理的详细信息。

　　/proxy/开头的请求，都会使用target的域名进行请求，

　　secure中 false 为 http请求，true为https请求

　　changeOrigin 为true 可以进行跨域请求

　　pathRewrite 的^/proxy 为在地址后面拼接别的地址

　　headers 的 User-Agent 为 请求的UA，可以写手机的UA，这样去模拟手机请求

　　页面请求方式 直接在url 中写入 /proxy/rank/list?json=true

 

 

　　持续更新中。。。