2018-07-14

跨域请求

ajax 跨域

什么是跨域

简单来说 : 就是网站A去调用B网站的数据

但是Ajax跨域存在一个问题 – 浏览器的同源策略,该策略还会组织ajax跨域的访问.

同源策略（Same origin policy）是一种约定，它是浏览器的一种安全功能

同源: 同协议，同域名，同端口；不同源则为跨域

1
2
3

http:   --> 这是协议
www.    --> 这是端口
com/com:8080  --> 这是端口

解决跨域呢有三种方法:

服务器代理
cors （跨域资源共享）
jsonp

下面来介绍这三种的用法 —

代理实现ajax跨域 –>使用phpStudy创建

核心思想: php中有一个函数 ==file_get_contents==。该函数能够获取到其他网站的数据。

file_get_contents(‘http://www.baidu.com/index.html');

案例:

发送ajax请求 ： 
这是一个文件
$.post('路径文件名',function (msg) {
    alert(msg);  // 这里的 msg 就是接受的返回值
})
// 这是这个文件的PHP处理文件 请求的是 1.php 的这个文件
<?php echo file_get_contents('http:www.demo.com/1.php'); ?>

// 这里是另一个文件,被请求的文件 1.php
<?php echo "这样就可以了"; ?>

** 注意php文件里面必须有分号,不然就会报错

cors 实现跨域

cors: 跨域资源共享。
同源策略是浏览器的策略。但是如果服务器允许其他网站的页面进行跨域访问，那么浏览器就不会对返回的数据进行限制了。

==核心方法: 在服务器端(PHP文件中)声明不用进行同源限制==

如果设置为则是所有外部网站都可以获取数据
header(‘Access-Control-Allow-origin: ‘);

只允许www.study.com网站访问并获取数据 ,这样写就可以了,
header(‘Access-Control-Allow-origin: http://www.study.com');

发送ajax请求 ： 
这是一个文件
$.post('路径文件名',function (msg) {
    alert(msg);  // 这里的 msg 就是接受的返回值
})

<?php header('Access-Control-Allow-Origin: *'); 
	  echo '这就是解决方案';
?>

** 注意php文件里面必须有分号,不然就会报错

jsonp跨域

JSONP(JSON with Padding) : 是一种解决ajax跨域访问的方案。

核心思想:
浏览器虽然有同源策略，但是 src 和 href 两个属性却可以跨域访问。可以利用这一“漏洞”发送ajax请求 .

	这是要请求的文件
<script src="http://www.demo.com/1.php"></script>

	这是被请求的文件 --> 返回的是一个字符串 
<?PHP echo '你可以叫我大玄'; ?>
	
	 调整后台返回数据的方式 --- 返回了一个 ==函数字符串 例如: 'aaa(123)'== 
<?php "aaa('lidaxuan')"; ?>
	但是这样的话就在前端页面提前定义好函数aaa
	function aaa(str) {
       alert(str);
	}

$.ajax方法跨域操作 — jsonp方式

1	$.post $.get $.ajax都能发送跨域请求。但是，$.post和$.get是要依靠cors方式的，只有$.ajax能使用jsonp方式

核心:
必须设置请求类型为get — type: ‘get’
必须设置dataType为jsonp — dataType: ‘jsonp’
必须额外设置一个jsonp参数，该参数值可以是任何英文字符串，常用callback。 jsonp: ‘callback’
==该参数会产生一个随机字符串==
==前端使用该字符串创建一个函数==
==后端接收该字符串作为返回函数的名称==

示例:

1) 使用jsonp发送跨域请求

$.ajax({
    url: 'http://www.study.com/test/3.php',
    type: 'get',   
    dataType: 'jsonp',   
    jsonp: 'callback',  //解决前后端函数名统一的问题   
    success: function(msg){
        alert(msg);
        alert(msg.name);
    }
})

2) 后端拼接函数字符串

<?php 
// 函数名
$callback = $_GET['callback'];
$str = "$.ajax--->jsonp";
ech

本文标题:跨域请求

文章作者:李大玄

发布时间:2018-07-14, 01:27:51

最后更新:2018-07-17, 21:41:05

原始链接:http://yoursite.com/2018/07/14/跨域请求/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。