跨域

利用ajax去请求百度的页面

sendAjax({
    url:"https://www.baidu.com/?tn=49055317_10_hao_pg",
    success:res=>{
        console.log(res);
    }
})

// 报错：Failed to load https://www.baidu.com/?tn=49055317_10_hao_pg: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

因为浏览器为了安全，规定不允许ajax请求不同源的地址

同源：同域名、同协议、同端口 - 在服务器中，默认有256个文件夹，每个文件夹中有256个文件夹 - 65536个文件夹，每一个文件夹都负责一个功能，不同的协议请求过来，会有专门的文件夹去处理，http：80 https：443 mysql：3306 ftp：21 sftp：22

希望从别的不同源的地址获取到数据 - 跨域

 

 跨域的方法：

1.使用php（服务器语言）做代理 - 浏览器限制不了服务器语言 -cors

sendP({
    url:"pachong.php",
    dataType:"string"
 }).then(res=>{
     console.log(res);
 }).catch(()=>{
     console.log("请求出错了");
 })

<?php
header('content-type:text/html;charset=utf8');
$str = file_get_contents("http://xiaohua.zol.com.cn/detail60/59404.html");
var_dump($str);

2.使用服务器做代理 - nginx -proxy

注意：配置nginx代理 - 首先找到‘nginx的配置文件：D:\PHPstudy\nginx\conf\nginx.conf

打开配置文件，在80行左右，找到proxy，配置：

 location /xiaohua {

proxy_pass "http://xiaohua.zol.com.cn/detail60/59404.html";

}

 

/xiaohua 是自己定义的一个请求路径；

proxy_pass：  的后面是请求的目标地址

sendP({
    url:"/xiaohua",
    dataType:"string"
}).then(res=>{
    console.log(res);
})

nginx服务器：访问页面的路径不能有中文

3.cors方法- 给目标地址设置响应头

自己设置一个域名 - 在当前计算机上开辟一个新的域名，用localhost请求这个域名

虚拟主机：在自己电脑上另外设置一个域名

步骤：

1.打开phpstudy中的“其他选项菜单”，选择“站点域名管理”，输入域名，选择对应的文件夹路径，点击“新增”，点击“保存并生成配置文件”

2.给域名设置对应的ip地址：打开C盘，打开C:\Windows\System32\drivers\etc\hosts文件

在文件的最底下添加一行：127.0.0.1 www.qianduan2008.com

3.重启 服务器

4.测试域名是否能用：在目标文件夹中新建index.php文件，输出点内容，在浏览器中输入这个域名访问

sendP({
    url:"http://www.qianduan2008.com/",
    dataType:"string"
}).then(res=>{
    console.log(res);
}).catch(()=>{  
    console.log("错误了");
})

<?php
header("content-type:text/html;charset=utf8");
header("Access-Control-Allow-Origin:*");
echo '这是qianduan2008域名下的index文件'；

jsonp跨域

jsonp：利用跨域的同源性 

script的src：把请求回来的数据当做js代码解析

 动态创建 : 

function fn(name){
    console.log('这是fn函数');
    console.log(name);
}
var script = document.createElement("script");
var data = {
    fnname:"fn",
    name:"李四"
}
var url = 'http://www.qianduan2008.com/index.php'
var f = '';
url += '?'
for(var attr in data){
    url += f + attr + '=' + data[attr]
    f = '&'
}
console.log(url);
script.setAttribute('src',url);
document.body.appendChild(script);

注意：php中输出得是js代码

也可以直接引入script用src：

<script src="http://www.qianduan2008.com/index.php?fnname=fn&name=张三"></script>

 

 jsonp跨域封装

function jsonp(obj){
    var script = document.createElement("script");
    var f = '';
    obj.url += '?'
    for(var attr in obj.data){
        obj.url += f + attr + '=' + obj.data[attr]
        f = '&'
    }
    script.setAttribute('src',obj.url)
    window[obj.data.cb] = obj.success;
    document.head.appendChild(script)
    document.head.removeChild(script)
}

****************调用模板***************************
jsonp({
    url:'http://search.jumei.com/ajax_get_assoc_word',
    data:{
        search:'js',
        cb:'searchCallback',
        container:'top_out_search_pop_div',
        callback:'jQuery111203019009406878028_1611815393127',
        _:1611815393139,
    },
    success:res=>{
        console.log(res);
    }
})

 请求方式

get post put delete

 localhost/index.php - get - 查询

 localhost/index.php - post - 新增

 localhost/index.php - put - 修改

 localhost/index.php - delete - 删除

 

get和post的区别：

1.get请求的参数暴露在地址栏

2.相对而言，post相对安全一点

3.get请求地址栏中的数据有大小限制的，post大小没有限制

4.get只接受ASCII类型，而post没有限制

请求状态码：

1开头 - 正在请求

200 - ok

301 - 临时重定向

302 - 永久重定向

304 - 缓存

403 - 没有权限

404 - 路径错了

5开头 - 服务器错误