什么是跨域及解决跨域都有哪些方法？

一.同源策略

浏览器为了隔离潜在的恶意文件，使用同源策略，限制从一个源加载的文档或脚本和另一个源的资源进行交互（不同源之间的文档，资源的交互）;
通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：

无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
无法接触非同源网页的 DOM
无法向非同源地址发送 Ajax 请求

所谓同源（即指在同一个域）就是两个页面的协议（protocol），主机（host）和端口号（port）”三者相同;注意：跨域限制访问，其实是浏览器的限制。

二.什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

浏览器对跨域请求的拦截:

三、跨域解决方法

1.JSONP:(JSON with Padding)

1). JSONP 是什么

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。

2).JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script。 JSONP 就是利用 script 标签的跨域能力来发送请求的。

由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。但是 <script 标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。
因此，JSONP 的实现原理，就是通过 <script 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。
①原生实现：

<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字
 
// 处理服务器返回回调函数的数据
<script type="text/javascript">
    function dosomething(res){
        // 处理获得的数据
        console.log(res.data)
    }
</script>

②Vue.js：

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

2. CORS

1).CORS 是什么？

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法:
它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。缺点是不兼容某些低版本的浏览器；
跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些 源站通过浏览器有权限访问哪些资源。

2)CORS 怎么工作的？

CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应 以后就会对响应放行。
使用额外的HTTP头告诉浏览器被准许访问来自不同源服务器上的指定的资源。

3).CORS 的使用 主要是服务器端的设置：

	// 设置响应头，设置允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*");
    // 设置所有类型的头信息都可以接收.允许自定义头信息
    response.setHeader("Access-Control-Allow-Headers", '*');
    // 配置任意方法
    response.setHeader("Access-Control-Allow-Method", '*');
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
    response.send('hello CORS');

1、普通跨域请求：只需服务器端设置Access-Control-Allow-Origin
2、带cookie跨域请求：前后端都需要进行设置
①原生ajax

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
 
// 前端设置是否带cookie
xhr.withCredentials = true;
 
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
 
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};

②axios：

axios.defaults.withCredentials = true

3. webpack本地代理

在webpack.config.js中利用 WebpackDevServer 配置本地代理，详情配置查看devServer

    devServer: {
        port: 8080,
        proxy: {
            "/api": {
              target: "http://192.168.122.55:8088" // 后端接口
            }
        }
    }

4. 服务器使用Nginx的反向代理

server {
    listen       80;
    server_name  user.subignquan.com;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

}

注：现在主流框架都是用代理和 CORS 跨域实现的