解决跨域问题的两个方法！

一、为什么会出现跨域问题？

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

二、什么是跨域？

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

当前页面url 被请求页面url 是否跨域 原因
http://www.test.com/ http://www.test.com/index.html 否 同源（协议、域名、端口号相同）
http://www.test.com/ https://www.test.com/index.html 跨域 协议不同（http/https）
http://www.test.com/ http://www.baidu.com/ 跨域 主域名不同（test/baidu）
http://www.test.com/ http://blog.test.com/ 跨域 子域名不同（www/blog）
http://www.test.com:8080/ http://www.test.com:7001/ 跨域 端口号不同（8080/7001）

三、其实，解决跨域问题可以用以下两种方法来解决！

第一种是使用CORS中间件的方法，如果接口服务器配置了 CORS 相关的 HTTP 响应头，就可以解除浏览器端的跨域访问限制。第二种是使用jQuery 发出jsonp请求，因为第一种方法是后端常用的方法，这里我们就着重说下第二种方法

1、CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

1.1 普通跨域请求：只需服务器端设置Access-Control-Allow-Origin

1.2 带cookie跨域请求：前后端都需要进行设置

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

2.1 核心思想：

 **网页通过添加一个<script>元素，向服务器请求 JSON 数据，服务器收到请求后，
 将数据放在一个指定名字的回调函数的参数位置传回来。**

2.2 原理：

1） 客户端通过script标签发出请求，因为script标签的请求不受同源策略的限制
2）服务器端会返回一个函数的调用，把要发送的数据作为实参传入到函数调用中，如：fn（数据）
3）在客户端创建该函数，函数内部代码即可以通过形参得到服务器返回的数据

2.3 特点：

1）不属于真正的 Ajax 请求，因为没有使用 XMLHttpRequest
2）仅支持 GET 请求

2.4 使用jQuery发出jsonp请求：

$.ajax({
    type: 'GET',
    url: 'http://127.0.0.1/api/jsonp',
    dataType: 'jsonp',
    success: function (res) {
      console.log(res)
    },

2.5 jsonp接口实现：

1）获取客户端发送过来的回调函数的名字；
2）得到要发送给客户端的数据；
3）根据前两步得到的数据，拼接出一个函数调用的字符串；
4）把上一步拼接得到的字符串，响应给客户端的 <script> 标签进行解析执行；

四、总结：

想深入了解跨域问题的可以去看看这篇博客！！！

跨域好文相关链接：https://blog.youkuaiyun.com/qq_38128179/article/details/84956552