能否在HTML页面中使用request-promise？跨域GET请求如何实现？

嘿，我来帮你拆解这些问题：

1. 能否在HTML页面中使用request-promise？ #

答案是不行。因为request-promise是基于Node.js环境的http/https模块以及request库开发的，而浏览器环境并没有这些Node.js专属的内置模块，直接在HTML页面的前端代码里调用request-promise会报错，找不到依赖模块。

2. 若可以，正确的配置方式是什么？（附替代思路） #

既然直接用不了，要是你非要在浏览器环境里用类似request-promise的语法，可以试试用Browserify或Webpack这类打包工具，把request-promise及其依赖打包成浏览器能识别的代码。不过说实话，这种方案挺鸡肋的——浏览器本身就有更轻量、更适配的HTTP请求工具，完全没必要折腾Node.js的库来适配浏览器。

3. 能否向不同域名发起GET请求？ #

不管用不用request-promise，浏览器都受同源策略限制：默认情况下，前端脚本只能向当前页面的同源域名发起请求（同源指协议、域名、端口都一致）。如果直接向不同域名发GET请求，浏览器会拦截这个请求，抛出跨域错误。

只有当目标域名的后端配置了**CORS（跨域资源共享）**响应头（比如Access-Control-Allow-Origin: *或者指定你的域名），浏览器才会允许这个跨域请求。

网页向其他域名发起GET请求的最佳方案 #

根据场景不同，推荐这几种方案：

• CORS（优先推荐）：让目标域名的后端开发者配置CORS响应头，允许你的域名访问。前端直接用浏览器原生的fetch API，或者axios这类轻量库发起GET请求就行，示例代码：

  // 用fetch的例子
  fetch('https://目标域名/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => console.error('请求失败:', err));
  
  // 用axios的例子
  axios.get('https://目标域名/api/data')
    .then(res => console.log(res.data))
    .catch(err => console.error(err));
  

• JSONP（仅适用于GET请求，兼容老浏览器）：如果目标域名支持JSONP，你可以通过动态创建<script>标签的方式发起请求。不过JSONP有安全风险，现在已经逐渐被CORS替代，示例：

  function handleJsonpData(data) {
    console.log('拿到的数据:', data);
  }
  const script = document.createElement('script');
  script.src = 'https://目标域名/api/data?callback=handleJsonpData';
  document.body.appendChild(script);
  

• 代理服务器（适合后端无法配置CORS的情况）：自己搭建一个Node.js代理服务器（比如用express+request-promise），前端先请求自己的代理服务器，再由代理服务器去请求目标域名（服务器端不受同源策略限制）。示例代理服务器代码：

  const express = require('express');
  const rp = require('request-promise');
  const app = express();
  
  app.get('/proxy-data', async (req, res) => {
    try {
      const targetUrl = 'https://目标域名/api/data' + req.url;
      const data = await rp(targetUrl);
      res.send(data);
    } catch (err) {
      res.status(500).send(err);
    }
  });
  
  app.listen(3000, () => console.log('代理服务器运行在3000端口'));
  

  前端就请求http://localhost:3000/proxy-data即可。

内容的提问来源于stack exchange，提问作者makat