跨域问题以及解决方案

跨域问题以及解决方案

一、什么是跨域

因为安全问题,非同源的网站发送请求数据,会被浏览器拒绝。

二、跨域的原因

就是跨域名,跨端口,跨协议。举个例子:
http://www.baidu.com/hello/world.html

请求地址 形式 是否跨域
http://www.baidu.com/test/a.html 同一域名,不同文件夹 非跨域
http://www.baidu.com/hello/kitty.html 同一域名,同个文件夹 非跨域
http://test.baidu.com/hello/world.html 非同个域名,文件夹一样也没用 跨域
http://www.baidu.com:8081/hello/world.html 同一域名,端口不一样 跨域
https://www.baidu.com/hello/world.html 不同的协议、同个域名,文件夹一样 跨域

域名要一致,端口要一致,协议(http、https要一致)才不是跨域。

三、如何解决ajax跨域

3.1、 jsonp

古老又神奇的解决方案,实际不推荐。如果要用,可以使用类似JQuery对jsonp封装好的类库来处理。

$.ajax({
    url: "http://localhost:8080/student",
    type: "GET",
    dataType: "jsonp", //指定服务器返回的数据类型
    success: function (data) {
       console.log(JSON.stringify(data));//获取得到的数据
    }
});

这时候你会在network看到https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?callback=jQuery30003244305640945704_1531990977401&tel=15510588888&_=1531990977402;
内部操作应该是生成一个全局的方法:jQuery30003244305640945704_1531990977401成功的时候回调这个方法,也就是

jQuery30003244305640945704_1531990977401(data){
    console.log(JSON.stringify(data));//获取得到的数据
}

当请求访问成功的时候会调用这个方法。之前用过一次,被动使用。主要是因为对接的技术方只提供这个方式,很显然他们说什么都对…

  • 测试代码(DEMO来源:CSDN lulu19870526)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title heretitle>
 
head>
<body>
   <h1>测试jsonph1>
    <ul>
         <li class="num">手机号码: <span>span>li>            
         <li class="province">归属省份: <span>span>li>
         <li class="operators">运 营 商: <span>span>li>
		 
		 <li class="num2">手机号码: <span>span>li>            
         <li class="province2">归属省份: <span>span>li>
         <li class="operators2">运 营 商: <span>span>li>
    ul>
    
    <script src="https://code.jquery.com/jquery-3.0.0.min.js">script>
<script>
   function testjsonpcallback(data){
     var province = data.province,
       operators = data.catName,
       num = data.telString;
 
      $('.num span').html(num);
      $('.province span').html(province);
      $('.operators span').html(operators);
	   
   }
$(function(){
    $.ajax({
        url: "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm",
        type: "GET",
		data:{tel:"15510588888"},
        dataType: "jsonp", //指定服务器返回的数据类型
        success: function (data) {
            console.log(JSON.stringify(data));//获取得到的数据
			  var province = data.province,
			  operators = data.catName,
			  num = data.telString;
		 
			  $('.num2 span').html(num);
			  $('.province2 span').html(province);
			  $('.operators2 span').html(operators);
        }
    });
})
script>
 
                    
                    

你可能感兴趣的:(前端杂项,跨域,的的的JavaScript的,前端,卷筒纸,network)