node用2行代码解决👉 HTTP跨域😎

代码地址:github.com/XinYueXiao/…

一、 制造不同源

1. 创建一个服务器3006,用于处理请求

1.1 在index.html页面,模拟请求api/users

1.2 模拟服务器,服务器在3006端口


1.3 使用nodemon启动api.js,在http://localhost:3006/可以看到请求信息


nodemon是用于启动node服务的,使用该工具保存后自动更新服务代码,不用重新执行启动文件

2. 创建另一个服务器3008,用于请求数据



2.1 两个端口服务一起启动,在index.js引入两个服务文件,并启动index.js

2.2 此时访问3008,访问api/users 404


3.解决它


3.1 👁 端口问题

3.1.1修改index.html接口请求为3006端口


  • 对不同端口的接口请求进行对比,发现通过3008访问3006时,接口请求成功,浏览器去无显示


  • 查看浏览器错误 ---> 此时发生了跨域的请求(端口不同)


通过CORS策略已阻止从源“ http://localhost:3008”访问“http://localhost:3006/api/users”
处的XMLHttpRequest:“ Access-Control-Allow-Origin”标头的值为“http://localhost:3008' 不等于提供的来源。
  • 由此得知需要在服务端设置`Access-Control-Allow-Origin`

        -未设置`Access-Control-Allow-Origin`


         -设置`Access-Control-Allow-Origin`,页面显示正常


 3.1.2由上可知,跨域是被浏览器限制住了,到这里结束了吗?并没有

上面的例子只是一个简单的请求,http还会发送预检请求,什么情况会触发预检请求呢?HTTP请求使用了以下HTTP的方法
  • PUT
  • DELETE
  • CONNECT
  • OPTIONS
  • TRACE
  • PATCH

或者人为设置了对 CORS 安全的首部字段集合之外的其他首部字段

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width
  • Content-Type的值不属于下列之一:
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain
  • 作者:coder_sherry
    链接:www.jianshu.com/p/b55086cbd…(可以查看更详细的解释)
    来源:简书

    3.2 👁预检请求问题

    3.2.1模拟预检请求 --> 人为设置CORS不安全字段

    此时浏览器出于pending状态,需要实现预检请求使其变成ok状态

    3.2.2实现预检请求-->设置不安全字段为允许


    • 预检请求改为通过后,会发起两个请求,第一个为预检请求,设置`X-Token`为允许字段


    • 第二个为普通请求,此时的X-Token已变成允许,请求正常,并为普通请求设置X-Token值


    3.3 👁`withCredentials`跨域请求凭证

    XMLHttpRequest.withCredentials 属性是一个Boolean类型,它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制(cross-site Access-Control)请求。在同一个站点下使用withCredentials属性是无效的。

    3.1 如果你的请求头需要添加cookie,你需要在相应位置设置`withCredentials`为`true`

    4.Proxy代理

    4.1 在proxy新增代理,并注释之前添加的允许操作


    4.2 运行nodemon proxy.js 


    4.3 总结,两行解决它😎




    分类:
    前端
    标签: