面试题：JavaScript 中反射 API 基础及跨域调用场景

Question

请简要介绍 JavaScript 反射 API 的常用方法，并说明在跨域调用场景下，使用反射 API 可能会遇到哪些问题及常见的解决思路。

Answer 1

JavaScript 反射 API 常用方法

1. Reflect.get(target, propertyKey[, receiver])
   • 作用：用于获取对象属性的值。
   • 示例：

   const obj = {name: 'John'};
   const value = Reflect.get(obj, 'name');
   console.log(value); // 输出: John
   

2. Reflect.set(target, propertyKey, value[, receiver])
   • 作用：设置对象属性的值。
   • 示例：

   const obj = {};
   const result = Reflect.set(obj, 'name', 'Jane');
   console.log(obj.name); // 输出: Jane
   console.log(result); // 输出: true
   

3. Reflect.has(target, propertyKey)
   • 作用：判断对象是否包含某个属性。
   • 示例：

   const obj = {name: 'John'};
   const hasProp = Reflect.has(obj, 'name');
   console.log(hasProp); // 输出: true
   

4. Reflect.deleteProperty(target, propertyKey)
   • 作用：删除对象的属性。
   • 示例：

   const obj = {name: 'John'};
   const deleted = Reflect.deleteProperty(obj, 'name');
   console.log(deleted); // 输出: true
   console.log('name' in obj); // 输出: false
   

跨域调用场景下使用反射 API 可能遇到的问题

1. 安全限制：跨域时，浏览器的同源策略会限制对其他域对象的访问。即使使用反射 API，也无法直接访问跨域对象的属性和方法，因为这可能导致敏感信息泄露。
2. 权限问题：跨域环境下，不同域的脚本通常没有权限相互操作对象，反射 API 尝试访问或修改跨域对象可能会抛出安全相关的错误。

常见的解决思路

1. JSONP：通过 <script> 标签加载跨域脚本，利用回调函数来传递数据。但 JSONP 只支持 GET 请求，且存在一定的安全风险（如 XSS 攻击）。
2. CORS（跨域资源共享）：服务器端设置响应头，允许特定来源的跨域请求。例如，在 Node.js 中使用 express - cors 中间件，设置 Access - Control - Allow - Origin 等响应头，以允许指定域的请求访问资源。
3. 代理服务器：在本地搭建一个代理服务器，所有跨域请求先发送到代理服务器，由代理服务器转发请求到目标服务器，并将响应返回给前端。这样可以绕过浏览器的同源策略限制，因为代理服务器和前端处于同一域。