为什么会产生跨域，以及解决跨域的方法

一、跨域

1、为什么会产生跨域

答：因为浏览器的同源政策，就会产生跨域。比如说发送的异步请求是不同的两个源，就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑，就会产生一个同源政策，不是同一个地方出来的是不允许进行交互的。

2、怎么解决跨域

解决跨域的方法：第一种jsonp的方法。第二种使用CORS解决跨域问题，即跨域资源共享，在后端设置响应头部，加一句代码：access-control-allow-origin:"*"或者允许交互的域名。第三种使用vue，找到config文件下->index.js文件，修改propyTable中的target的值，就可实现用前端解决跨域。第四种，使用代理；第五种，使用postmessage

1、jsonp方法：

jsonp是一种借助于 script 标签发送跨域请求的技巧方案。script的src属性可以访问网络上的资源，并script标签可以拿到响应体。

<script>
    function test(json){
        console.log('我被调用了');
        console.log(json);
   }
</srcipt>
<script src="http://api.douban.com/v2/movie/top250?callback=test"></script>

我们可以看到，我们预先定义了一个函数叫test，再然后在src里加了一个参数callback=test，可以发现，当请求完成，会自动调用test这个函数，并且把响应体（JSON数据）当做参数传递过来.实际上是浏览器用script的src去发起请求，并且传递一个参数叫callback=函数名，服务器接收到这个函数名，在返回的响应体里面调用这个函数，并且把json当做参数传递.
注意:(1).Jsonp不是一套新技术，只是聪明的程序员想出的一套方案
(2)能不能用这套方案，要看服务器端代码怎么写，服务器端如果写了调用函数的代码，那么就能支持JSONP方案.

如果是在JQuery中使用Ajax,则只需要在dataType属性中把json改为jsonp即可;

2、后端处理跨域方法：使用cors解决跨域问题，即跨域资源共享，设置响应头。

<?php 
    $json = array("name"=>"jack","age"=>16);
    //代表告诉浏览器，我允许任意域名访问我这个接口
    //如果写一个*，代表所有域名都可以来访问我
    // header('Access-Control-Allow-Origin: *');
    //如果写的是指定域名，代表只有这个域名可以访问
    header('Access-Control-Allow-Origin: *');
    echo json_encode($json);
?>

3、前端跨域方法：使用vue

找到config文件下->index.js文件，修改propyTable中的target的值。

proxyTable: {
“/api”: {
target: “http://localhost:8080”,
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}
}

4、iframe嵌套通讯，postmessage

HTML5引入了一个全新的API：跨文档通信 API（Cross-document messaging）。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。

本文部分参考：https://blog.csdn.net/sinat_28296757/article/details/80771082