跨域访问踩坑记录

trifling_

已于 2024-04-20 09:47:20 修改

阅读量385

点赞数 4

文章标签：前端

于 2024-03-31 12:47:13 首次发布

本文链接：https://blog.csdn.net/Trifling_/article/details/137196906

版权

本文介绍了如何在Node.js中设置环境变量，以及在处理跨域访问时的CORS规则，包括请求方法、headers的处理、fetchAPI中的credentials选项和mode，以及关于cookie注入和CORS缓存的最佳实践。

摘要由CSDN通过智能技术生成

node 设置环境

process.argv 设置环境变量参数 node ./index.js -p 8080

process.env.PORT 设置环境 PORT=8080 node ./indexjs

在 Unix-like 系统中，环境变量的设置通常是通过在命令之前使用的方式来指定的，这是因为在命令行中，命令和其参数是按顺序解析的。因此，设置环境变量时，确保它们在命令之前可以保证它们被正确地传递给正在运行的命令。

然而，并非所有的命令行工具都遵循相同的语法。有些命令行工具可能允许环境变量在命令之后设置，因为它们可能具有解析参数的特殊方法。

跨域访问

跨域访问都要设置允许请求origin ，简单请求/非简单请求区别在于 method 、content-type不同，非简单请求会先发送options 请求；浏览器自带都会携带origin

options请求条件：

请求跨域，且2、3满足一个（简单请求、非简单请求）
请求方法不是：HEAD、GET、POST
HTTP的头信息超出以下几种字段：
```
  Accept  
  Accept-Language  
  Content-Language  
  Last-Event-ID  
  Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
```
options请求通过后，浏览器并不会展示options请求记录，只会展示真实业务请求，可用charles抓包查看options请求

fetch 知识点

credentials： same-origin(默认) include omit 跨域请求携带cookie, 也直接影响set-cookie 是否能注入，（LZ踩坑）

当请求使用 credentials: 'include' 时，响应的 Access-Control-Allow-Origin 不能使用通配符 "*"。在这种情况下，Access-Control-Allow-Origin 必须是当前请求的源，在使用 CORS Unblock 插件的情况下请求仍会失败

mode： cors(默认）、no-cors 或 same-origin 用于确定跨域请求是否能得到有效的响应

对请求header对象设置 content-type. Content-Type会导致浏览器解析合并两个content-type 并用“，”分割，导致服务解析异常（LZ踩坑）

其他：

服务器不能将 Access-Control-Allow-Origin 的值设为通配符“*”，而应将其设置为特定的域，如：Access-Control-Allow-Origin: https://example.com。
服务器不能将 Access-Control-Allow-Headers 的值设为通配符“*”，而应将其设置为标头名称的列表，如：Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
服务器不能将 Access-Control-Allow-Methods 的值设为通配符“*”，而应将其设置为特定请求方法名称的列表，如：Access-Control-Allow-Methods: POST, GET
Access-Control-Expose-Headers 响应标头允许服务器指示那些响应标头可以暴露给浏览器中运行的脚本，以响应跨源请求
Access-Control-Max-Age 可缓存cors，避免每次请求都发送预请求

charles 不能抓 127.0.0.1

cookie注入只能是给当前请求接口域名注入

跨域（Options）请求介绍及解决方法 - 掘金

跨域资源共享 CORS 详解 - 阮一峰的网络日志