5.nodejs--跨域、CORS、JSONP 、Proxy

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

目录

文章目录

1.跨域

(1.1) 跨域的基本概念

(1.2) 接口的跨域问题

2.CORS

(2.1)什么是cors,cors原理

(2.2) CORS跨域资源共享--CORS的三个响应头

(1)CORS响应头部--Access-Control-Allow-Origin

(2)CORS响应头部--Access-Control-Allow-Headers  

(3) CORS响应头部--Access-Control-Allow-Methods

(2.3)CORS请求的分类

3.JSONP

(3.1)JSONP的概念以及特点

(3.2) 实现JSONP接口的步骤

(3.3)讲一讲你对JSONP的理解?

(3.4)JSONP原理

4.Proxy

(4.1)Proxy原理



1.跨域

(1.1) 跨域的基本概念

          如果用户访问我们的A服务器的网页,网页内部的AJAX去请求B服务器的数据接口,就算是B服务器、把json数据发送给了用户的浏览器,但是浏览器因为同源策略的原因,会阻止数据使用,这种现象就是跨域了。

        具体的跨域的两个服务器的标识是:协议 ip port

 (1)概念:浏览器为了用户的信息安全,网页中有一个网络请求技术:ajax在做网络请求时,请求的网址和当前页面的网址不是同一台服务器,就会被拒绝。
        跨域的两个条件:非同源 ajax

什么是同源策略
==>浏览器的一种安全策略,指两个网址的协议 ip port 三者一样代表同源

//同源==>pathname不参与同源判断
http://www.baidu.com/index.html
http://www.baiud.com/home/goods/ajax1

//异源 ==>域名(ip:port)不一样
http://www.hqyj.com/index.html
http://www.hqyj.con/ajax

//异源 ==>域名(ip:port)不一样
http://www.hqyj.com/index.html //假设解析DNS为192.168.6.86:8000
http://192.168.6.86:8000/ajax

(1.2) 接口的跨域问题

1.主要有两种方案:
        CORS(主流的解决方案,推荐使用)
        JSONP(有缺陷的解决方案:只支持GET请求)

    
2.使用cors中间件解决跨域问题
       使用步骤分为如下三步:
            (1) 运行npm install cors安装中间件
            (2) 使用const cors=require("cors")导入中间件
            (3) 在路由之前调用app.use(cors())配置中间件

2.CORS

(2.1)什么是cors,cors原理

  (1) 什么是cors?
     ==>   cors(跨域资源共享)由一系列http响应头组成,这些http响应头决定浏览器是否阻止前端js代码跨域获取资源
        浏览器的同源安全策略默认会阻止网页“跨域”获取资源,但如果接口服务器配置了cors相关的http响应头,就可以解除浏览器端的跨域访问限制。

cors的注意事项:
           (1) cors主要在服务器端进行配置,客户端浏览器无须做任何额外的配置,即可请求开启了cors的接口
            (2)cors在浏览器中由兼容性,只有支持XMLHttpRequest Level2的浏览器,才能正常访问开启了cors的服务器端接口。

  cors的原理:

         在实际生产或者项目的开发阶段,有时候真的需要跨域访问资源,可以在后端发送数据包时,在数据包的头部配置,这个数据包被跨域请求时的,跨域资源共享,白名单
          也就是:res.setHeader("Access-Control-Allow-Origin","具体的白名单域0,可以配置*")

(2.2) CORS跨域资源共享--CORS的三个响应头

(1)CORS响应头部--Access-Control-Allow-Origin

 (1) CORS响应头部--Access-Control-Allow-Origin
    响应头部中携带一个Access-Control-Allow-Origin字段,

        语法:Access-Control-Allow-Origin:|*
    Origin参数的值指定了允许访问该资源的外域URL
   

 例如:下面的字段值将只允许来自http://itcast.cn的请求:
        res.setHeader('Access-Control-Allow-Origin','http://itcast.cn') 

(2)CORS响应头部--Access-Control-Allow-Headers  

 (2) CORS响应头部--Access-Control-Allow-Headers
        默认情况下,CORS仅支持客户端向服务器发送如下的9个请求头:
            Accep、tAccept-Language、 Content-Language 、DPR 、Downlink、 Save-Date、 Viewport-width 、width 、Content-Type、(值仅限于text/plain、 mulitport/form-data、 application/x-www-form-urlencoded三者之一)
        如果客户端向服务器发送了额外的请求头消息,则需要在服务器端,通过Access-Control-Allow-Headers对额外的请求头进行声明,否则这次请求会失败

例如:
res.setHeader('Access-Control-Allow-Headers','Content-Type','X-custom-Headers')

(3) CORS响应头部--Access-Control-Allow-Methods

  (3) CORS响应头部--Access-Control-Allow-Methods
        默认情况下,CORS仅支持客户端发起GET POST HEAD请求
        如果客户端希望通过PUT DELETE等方式请求服务器的资源,则需要在服务器端,通过Access-Control-Allow-Methods来指明实际请求所允许使用的HTTP方法。
        示例如下:
           

 //允许所有的HTTP请求方法:
    res.setHeader('Access-Control-Allow-Methods','*')
//只允许POST GET DELETE HEAD请求方法:
    res.setHeader('Access-Control-Allow-Methods','POST,GET,DELETE,HEAD')

(2.3)CORS请求的分类

  客户端在请求CORS请求时,根据请求方式和请求头的不同,可以将CORS的请求分为两大类:
        (1)简单请求
            (1)请求方式:GET POST HEAD三者之一
            (2)HTTP头部信息不超过以下几种字段:无自定义头部字段、Accept、 Accept-Language、 Content-Language 、DPR 、Downlink 、Save-Date 、Viewport-width、 width、 Content-Type、(只有三个值text/plain、 mulitport/form-data、 application/x-www-form-urlencoded)
        (2)预检请求
            (1)请求方式为GET POST HEAD之外的请求Method类型
            (2)请求头中包含自定义头部字段
            (3)向服务器发送了application/json格式的数据
        在浏览器于服务器正式通信之前,浏览器会先发送OPTION请求进行预测,以获知服务器是否允许该实际请求,所以这一次的OPTION请求称为"预检请求"
        服务器成功响应预检请求后,才会发送真正的请求,并且携带真实数据。

简单请求和预检请求的区别
    简单请求的特点:客户端和服务器之间只会发生一次请求
    预检请求的特点:客户端和服务器之间会发生两次请求,OPTION预检请求成功之后,才会发起真正的请求。

3.JSONP

(3.1)JSONP的概念以及特点

JSONP接口
    JSONP概念:浏览器通过

你可能感兴趣的:(nodejs,后端,html5)