本文共 2056 字，大约阅读时间需要 6 分钟。

同源策略:

1.为什么产生跨域错误。

• 因为浏览器的同源策略

2.什么叫做浏览器的同源策略

• 同源策略:同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。
• 也就是说，收到请求的URL的域必须与当前 web页面的域相同。
• 同源策略是浏览器最核心的也是最基本的安全功能，
• 如果缺少了同源策略,则浏览器的正常功能可能会受到影响。
• 可以说web的是构建在同源基础之上的，浏览器只是针对同源策略的一种实现。

3.那些情况会产生跨域。

1. http://www.baidu.com.list/index.html 地址
2. http：//www.baidu.com 域名
3. (/list/index.html) 路径
4. 域名不同。
5. 端口不同。
6. http 和 https 协议不同。
7. 域名和域名对应的ip地址也会产生跨域

4.如何解决跨域问题

• 后端代理–后端不存跨域
• json
• core

---

跨域请求

1.后端代理：后端脱离浏览器，同源策略对它没用;

• file_getconts(url):获取url里面的数据(php文件中)。
• 配合ajax一起使用

注意：

如果系统不能使用上面的函数–修改配置 找到php的配置文件：wampserver–php–php.ini文件 extension=php_openssl.dll 将这句话前面的分号去掉。

js代码

$ajax({
                   url: "http://localhost/NZ-1903/0306/joke.php",                success: function (e) {
                       let obj = JSON.parse(e);                    console.log(obj);                    document.write(obj.content)                },            });

php代码

//后端代理//file_get_contents(url):获取url里面的数据   (解决跨域1)$joke = file_get_contents("http://www.kuitao8.com/api/joke");echo $joke;

---

2.core解决跨域

• CORS需要浏览器和服务器同时支持，才可以实现跨域请求，目前几乎所有浏览器都支持CORS，IE则不能低于IE10。CORS的整个过程都由浏览器自动完成，前端无需做任何设置，跟平时发送ajax请求并无差异。so，实现CORS的关键在于服务器，只要服务器实现CORS接口，就可以实现跨域通信。
• 跨域资源共享-core IE10以下的浏览器不兼容
• 后端跨域的页面添加几行代码。

注意：

1. header(“Access-Control-Allow-Origin:*”); // 指定允许其他域名访问
2. header(“Access-Control-Request-Methods:GET, POST, PUT, DELETE”); //指定请求方式 响应类型
3. header('Access-Control-Allow-Headers:x-requested-with,content-type);//响应头设置

js代码

$ajax({
                   url: "http://127.0.0.1/NZ-1903/0306/joke.php",//跨域                success: function (e) {
                       let obj = JSON.parse(e);                    console.log(obj);                    document.write(obj.content)                },            });

php代码

// corsheader("Access-Control-Allow-Origin:*");  // 指定允许其他域名访问header("Access-Control-Request-Methods:GET, POST"); //指定请求方式 响应类型$joke = file_get_contents("http://www.kuitao8.com/api/joke");echo $joke;

---

jsonp解决跨域

如果第三方接口提供了jsonp的数据格式，完全脱离后端得到数据。

ajax获取的数据都是字符串格式，jsonp获取函数填充的值，就是对象数组简单的值，无需转换。

1.script 标签会把请求回来的所有内容当作js代码来执行

2.jsonp 支持get请求。 3.回调函数-callback

注意:callback是约定好的函数名

转载地址：http://ugkgn.baihongyu.com/