跨域问题

1.为什么会出现跨域问题？

　　浏览器的同源策略限制，浏览器会拒绝跨域（拒绝读操作）请求。【服务器与服务器之间的数据请求不会存在跨域】

2.什么叫同源？

　　如果两个页面拥有相同的协议（protocol），端口（port）和主机（host），那么这两个页面就属于同一个源（origin）。【二级域名不同也属于不同主机】

　　域名和域名对应IP地址【http://www.test.com    http://37.254.15.10】

　　主域相同不同子域【http://www.test.com   http://test.com  http://script.test.com】 

3.跨域出现的场景？

　　一个应用需要请求不同（服务主机 / 域名不同->不同源）的服务接口

解决方案

1.CORS

　　Cors:全称是"跨域资源共享"（Cross-origin resource sharing）它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

　  【需要浏览器和服务器同时支持， IE10以上浏览器均支持。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉， 实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信】

　　Nginx设置

add_header ‘Access-Control-Max-Age‘ 86400;
add_header Access-Control-Allow-Origin *;//重点
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS,DELETE,PUT;
add_header ‘Access-Control-Allow-Headers‘ ‘DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type‘;

2.反向代理　　

　　Nginx反向代理 通过把非同源请求用同源代理的方式来饶过跨域限制。

proxy_pass http://www.test.com/

2.JSONP

　　JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

　　JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）

　　凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<\script>、<\img>、<\iframe>

　　web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀），显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。

<script type="text/javascript">
    // 得到航班信息查询结果后的回调函数
    var flightHandler = function(data){
        alert(‘你查询的航班结果是：票价 ‘ + data.price + ‘ 元，‘ + ‘余票 ‘ + data.tickets + ‘ 张。‘);
    };
    // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
    // 创建script标签，设置其属性
    var script = document.createElement(‘script‘);
    script.setAttribute(‘src‘, url);
    // 把script标签加入head，此时调用开始
    document.getElementsByTagName(‘head‘)[0].appendChild(script); 
</script>

比较

　　CORS对浏览器有要求，但对前后端的技术实现无改变

　　JSONP对浏览器没有要求，但其最终是通过GET方法访问服务，限制了数据大小，并且对服务端技术实现有很大依赖

　　反向代理对浏览器和技术实现均无要求，但限制了部署的灵活性

跨域问题

原文：https://www.cnblogs.com/winyh/p/10721333.html