"跨域及其解决方案？"

由于浏览器的同源策略机制，使得在请求不同域名的接口数据的时候就会出现跨域问题。

解决跨域的方式：

1、JSONP
利用script标签不受跨域限制，通过动态创建script标签+回调函数实现跨域，当然这种方式只适用到get请求

原生方式

//原生的实现方式
let script = document.createElement('script');
script.src = 'http://www.nealyang.cn/login?username=Nealyang&callback=callback';
document.body.appendChild(script);
function callback(res) {
  console.log(res);
}

jquery方式

$.ajax({
    url:'http://www.nealyang.cn/login',
    type:'GET',
    dataType:'jsonp',//请求方式为jsonp
    jsonpCallback:'callback',
    data:{
        "username":"Nealyang"
    }
})

2、document.domain + iframe 跨域
这种方式要求主域名相同，如：a.test.com b.test.com，把window.domain都设置成test.com就可以了

3、window.name + iframe 跨域
window.name属性可设置或者返回存放窗口名称的一个字符串。他的神器之处在于name值在不同页面或者不同域下加载后依旧存在，没有修改就不会发生变化，并且可以存储非常长的name(2MB)
通过改取window.name实现数据传递的效果

4、location.hash + iframe 跨域
location.hash和window.name都是差不多的，都是利用全局对象属性的方法，然后这两种方法和jsonp也是一样的，就是只能够实现get请求

5、postMessage跨域
h5新推出的接口，IE8+都已实现，通知发送和监听来实现数据传递
子页面发送

sonWindow.postMessage({age: 24});

主页面监听

window.addEventListener("message", function(res) { 
  console.log(res);
}, false);

6、后端允许跨域
php方式

<?php
header(“Access-Control-Allow-Origin: *”); // *允许所以，也可以指定具体域名

7、通过proxy代理
通过配置devServer proxy实现

devServer: {
  publicPath: '/',
  port: 8000,
  proxy: {
    '/api': {
      target: 'http://www.test.com',
      changeOrigin: true,
      pathRewrite: {
        "/api": "/api"
      }
    },
  }
},

nginx配置

location /api {
  proxy_pass http://www.test.com;
}