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 总结，两行解决它😎