跨域问题和解决

什么是跨域？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

访问不同域名，接口，端口里的内容

比如：http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）

http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）

解决办法：

1、JSONP：

注意JSONP只支持GET请求，不支持POST请求。

我们发现img link script引入的文件不会有跨域的问题。比如img可以引入其他网站上的一个图片。jsonp就是利用这个原理通过script动态的引入一个接口地址。

<button id="btn">点击</button>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $('#btn').click(function(){
            var frame = document.createElement('script');
            frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';
            $('body').append(frame);
        });
        
        function func(res){
            alert(res.message);//res就是这个接口的返回值
        }
  </script>

这里的http://localhost:3000/article-list是我们想请求的接口的地址，后面接的name=leo&age=30是参数。而callback就是接口请求回来的数据。func是需要接口返回的一个名字叫做func的函数还有用户想要的数据就通过参数传过来。

2、代理：

例如www.123.com/index.html需要调用www.456.com/server.php，可以写一个接口www.123.com/server.php，由这个接口在后端去调用www.456.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。

3、PHP端修改header（XHR2方式）

在php接口脚本中加入以下两句即可：

header('Access-Control-Allow-Origin:*');//允许所有来源访问

header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

4.CORS

CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

// 跨域请求
$scope.cros = function () {
    $http.get("http://localhost:9003/user/crostest.do",
              {'withCredentials':true}).success(function (response) {
        alert(response.message)
    })
}