AJAX(三)跨域

一、同源策略

同源策略最早由Netscape公司提出,是浏览器的一种安全策略。

同源:协议、域名、端口号必须完全相同。(同一个来源)

违背同源策略就是跨域。

AJAX发送请求时是默认要遵循同源策略的,不是同源策略,没法直接发AJAX。

get.html:



    
        
        
        首页
    
    
    

沃尔

app.js: 

const express=require('express');

const app=express();

app.get('/home',(request,response)=>{
   //响应一个页面
     response.sendFile(__dirname+'/index.html');
});

app.get('/data',(request,response)=>{
     response.send('用户数据');
});


app.listen(9000,()=>{
    console.log("服务已经启动...");
});

我们在网站中输入:http://127.0.0.1:9000/home:

之后再点击点击获取用户数据的按钮:

AJAX(三)跨域_第1张图片

 数据都是从9000端口来的,所以为同源。同源策略就是来源于同一个服务。

AJAX(三)跨域_第2张图片

如果点击按钮之后,显示状态码为304,此时删除缓存,重新刷新即可。 

二、跨域的解决方案

1.jsonp的实现原理

(1)JSONP(JSON with Padding),是一个非官方的跨域解决方案,纯粹凭借程序员的聪明才智开发出来,只支持get请求。

(2)在网页上有一些标签天生具有跨域能力,比如:img link iframe script

         JSONP就是利用script标签的跨域能力来发送请求的。

get.html:



    
        
        
        axios 发送 AJAX请求
        
    
    
       
       
       
       
    

此界面在浏览器中打开我们发现如下所示:

AJAX(三)跨域_第3张图片

此url为file协议的,而远端的axios.js的协议为https.域名和路径都不一样,但是仍然可以使用。

AJAX(三)跨域_第4张图片

使用的正是script标签。 

演示如下:

get.html:



    
        
        
        原理演示
    
    
        
   
    

app.js:

const data ={
    name:'woer'
};

console.log(data);

我们进行访问: 

AJAX(三)跨域_第5张图片

我们加入script标签如下所示:

原理演示.html: 



    
        
        
        原理演示
    
    
        
   
    

我们进行访问: 

AJAX(三)跨域_第6张图片

此时仍然可以响应,说明是可以跨域的。 

此时我们修改如下:

原理演示.html:



    
        
        
        原理演示
        
    
    
        

app.js: 

const data ={
    name:'yuehanwoer'
};
handle(data);

 查看响应信息:

AJAX(三)跨域_第7张图片

 此时为app.js资源给返回的结果,对里面内容做一个解析和做一个处理。

app.js:

//1.引入express
const express=require('express');
//2.创建应用对象
const app=express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{
//设置响应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('HELLO AJAX')
});
//延时响应
app.all('/delay',(request,response)=>{
  //设置响应头,设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*');
  response.setHeader('Access-Control-Allow-Headers','*');
  setTimeout(()=>{
     //设置响应体
    response.send('延时响应');
  },3000)
  });
//jQuery 服务
app.all('/jQuery-server',(request,response)=>{
    //设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    const data={name:'woer'} 
    //设置响应体
      response.send(JSON.stringify(data));
    });
//axios 服务
app.all('/axios-server',(request,response)=>{
  //设置响应头,设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*');
  response.setHeader('Access-Control-Allow-Headers','*');
  const data={name:'woer'} 
  //设置响应体
    response.send(JSON.stringify(data));
  });
  //fetch 服务
app.all('/fetch-server',(request,response)=>{
  //设置响应头,设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*');
  response.setHeader('Access-Control-Allow-Headers','*');
  const data={name:'woer'} 
  //设置响应体
  response.send(JSON.stringify(data));
  });
  //jsonp服务
app.all('/jsonp-server',(request,response)=>{
    response.send('console.log("hello jsonp-server")');
  })


//可以接收任意类型的请求
app.all('/server',(request,response)=>{
  //设置响应头,设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*');
  //响应头
   response.setHeader('Access-Control-Allow-Headers','*');
  //设置响应体
  response.send('HELLO AJAX POST')
  
  });

  app.all('/json-server',(request,response)=>{
    //设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
     response.setHeader('Access-Control-Allow-Headers','*');
     //响应一个数据
    //  const data={
    //   name:'woer'
    //  }
     //对对象进行字符串转换
    //  let str=JSON.stringify(data);
    //设置响应体,send方法里面只能接收字符串和Buffer
    response.send('HELLO AJAX POST')
    });
/*function chan(){
  return console.log("服务已经启动,8000端口监听中...");
}
可以用如下方法,也可以采用function定义的方法
*/
//4.监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动,8000端口监听中...");
    })

/*其中
()=>{
console.log("服务已经启动,8000端口监听中...");
}
相当于:
function ajax(){
  return console.log("服务已经启动,8000端口监听中...");
}
*/

原理演示.html: 



    
        
        
        原理演示
        
    
    
        

你可能感兴趣的:(AJAX,ajax,前端,javascript)