zoukankan      html  css  js  c++  java
  • Flutter web 踩坑关于浏览器的跨域的深思

    1.由于浏览器有同源策略,(相同协议,相同ip,相同端口)才能访问,由此导致出现跨域问题

    2.跨域的解决方法常见的有Jsonp, 以及nginx代理

    3.问题:1.禁止跨域到底是浏览器禁止的,还是服务器拒绝的 2.如果Nginx代理网站后,为什么访问Nginx代理的端口的就不会出现跨域呢(Nginx端口肯定也是独立的啊)

    4.问题:为什么跨域请求有时候会有两次请求,其中一次是optin,请求然后才是正确的请求

     解答:

    关于上边的问题解答如下:

    2.1.跨域jsonp解决方案是利用script 标签支持跨域加载,但是script 都是通过get请求,因此josnp 发送的都是get请求,因此无法post数据

    2.2 nginx 代理能解决跨域是因为:向代理服务器的nginx发起请求时候,nginx的配置中响应头中允许了跨域请求(即增加响应头:'Access-Control-Allow-Origin', '*'),然后nginx 收到请求后会通过代理的请求方式向目标服务器发器请求,然后将数据返回给客户端,从而解决了跨域问题

    3.1 :跨域是浏览器通过拦截禁止的,跨域请求发生后,服务器端可以收到跨域的请求并能返回正确的数据,但是如果服务器端未设置允许跨域,则浏览器收到数据时候发现不允许跨域请求,那么浏览器就会拦截数据,并在控制台中说明是因为同源策略请求失败的

    3.2答案在2.2中

    4.在跨域请求中:浏览器默认会分为简单请求和复杂请求,简单 请求会直接请求服务并返回数据,复杂请求则浏览器先发送 optin请求,然后服务器端响应如果允许则会发器后续请求,如果服务器不响应或者拒绝,则不会发器后续请求

    其中简单请求要求如下:

    请求方法是以下三种方法之一:
    • HEAD
    • GET
    • POST
    HTTP的头信息不超出以下几种字段:
    • Accept
    • Accept-Language
    • Content-Language
    • Last-Event-ID
    • Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

    复杂请求发起流程如下:

    例如:post请求需要自定义请求头 ,增加请求头signature ,和user

    那么此时浏览器会发起optin 请求,会携带如下请求头

    access-control-request-headers: signature ,user
    access-control-request-method: POST、

    其中access-control-request-headers 是告诉服务器,客户端想自定义请求头

    access-control-request-method:  是告诉服务器请求通过什么样方式发出

    然后服务器响应:服务器需要响应的响应头中需要有如下信息

    "Access-Control-Allow-Methods", '*' ; //跨域预检请求时候允许的请求方式,*则是任意请求方式,也可以指定请求头中的access-control-request-method的值
    "Access-Control-Allow-Headers", "*" ;//允许跨域自定义的请求头,*则是任意请求头都可以,也可以指定请求头中的 access-control-request-headers的值
    "Access-Control-Allow-Credentials", true //,如果服务器端的响应中未携带 Access-Control-Allow-Credentials: true ,浏览器将不会把响应内容返回给请求的发送者。
    "Access-Control-Max-Age", "3600" //跨域时候预检周期,防止重复性预检,即该请求在3600秒以内,不会进行预检了(周期内不进行optin 请求)

    本文参考了该片文章,该文章对跨域解释很明确感谢:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

     
  • 相关阅读:
    vue mock数据设置
    vue 的全局拦截器
    vue-resource基础介绍
    快速排序
    Node 中的 stream (流)
    v8垃圾回收和js垃圾回收机制
    Node内存限制与垃圾回收
    ReactNative http网络通讯
    luogu1829 [国家集训队]Crash的数字表格
    luogu2870 [USACO07DEC]最佳牛线,黄金Best Cow Line, Gold
  • 原文地址:https://www.cnblogs.com/lizhanqi/p/13564660.html
Copyright © 2011-2022 走看看