前端跨域请求解决方案

JS实现跨域的方式及原理:

个人价值观:
我们现在不谈技术,不谈bug,就谈人生价值观,从小我就喜欢学习钻研一些东西,将摩托车拆掉(肯定是装不起来的),将冰箱锤烂(目的是向看看里面到底是什么组成的),到了大学,不知道怎么滴就不爱学习了,到处乱逛,期末排名成绩一把索到了倒数可以用手指头抠明白的名次,毕业之后危机慢慢降临,俗话说不是不报,时候未到,用歇斯底里的最后一口气将自己从地狱拯救出来,接触了前端开发,一根生死绳,慢慢地往上爬,相信终将有所收获,致一起死磕在前端道路上的朋友,谢谢

1.什么叫跨域:

如果想要访问某一网站的时候需要在浏览器输入请求地址,此时浏览器就会根据你请求的协议,端口,域名进行判断发起请求给服务器,服务器响应给浏览器它想要的东西
这是引出了一个名词:同源策略,浏览器出于安全考虑发明出来的,防止其他恶意攻击,如果请求的协议,端口,域名都相等的话,那么就属于同源否则就是跨域请求,例如

说句人话:
同源:协议,端口 ,域名都相等
跨域:协议,端口 ,域名有一个不相等就叫跨域

如：http://www.example.com/detail.html 与以下地址对比
对比地址是否同源原因
http://api.example.com/detail.html 不同源域名不同
https://www.example.com/detail.html 不同源协议不同
http://www.example.com:8080/detail.html 不同源端口不同
http://api.example.com:8080/detail.html 不同源域名、端口不同
https://api.example.com/detail.html 不同源协议、域名不同
https://www.example.com:8080/detail.html不同源端口、协议不同
http://www.example.com/other.html同源只是目录不同

案例: 跨域报错

   //创建一个局部请求对象
  var xhr=new XMLHttpRequest();
  //设置请求行get的方式,通过拼接url的方式发起请求
  xhr.open('get','http://api.douban.com/v2/movie/top250');
    //get不需要设置请求头
    xhr.send();
    //注册监听状态
    xhr.function(){
       		 log(this.responseText);
    }

在这里插入图片描述

2.研究如何解决跨域:

1.jsonp 可以解决跨域问题:

   function res(data){
        //拿到响应体
        console.log(data)
    }
<script src='http://api.douban.com/v2/movie/top250?callback=res'></script>

2.服务器代理方式解决跨域问题例如php方式

  使用服务器端代理的方式:
 html:发起请求
 php拿到地址访问接口,并处理数据返回给html页面
<?php
header('Access-Control-Allow-Origin:*');
$result=file_get_contents('http://api.douban.com/v2/movie/top250');
echo $result;
?>


  使用服务器端代理的方式:
  html:发起请求
  php拿到地址访问接口,并处理数据返回给html页面

3.在服务器端使用:cors : Cross Origin Resource Share，跨域资源共享

       document.getElementById('btn').onclick = function () {
    //试一下用ajax的方式可不可以请求.
    //不允许ajax跨域访问
    var xhr = new XMLHttpRequest();
    xhr.open('get', 'http://www.lq.com/vue/day01/vue01/test.php');
    xhr.send();
    xhr.onload = function () {
        console.log(xhr.responseText);
    }
}

<?php
header('Access-Control-Allow-Origin:*');
echo "123";
?>