如何解决create-react-app调用Google Images接口的CORS跨域问题？

create-react-app 内置的proxy配置仅在本地开发调试阶段生效，项目打包部署到Firebase之后，该代理规则不会同步生效，浏览器直接跨域请求Google图片域名自然会触发CORS拦截。

直接使用Firebase Hosting自带的反向代理规则，无需额外搭建后端服务，操作步骤如下：

• 打开项目根目录下的firebase.json文件，在hosting配置项下新增rewrites规则：

{
  "hosting": {
    "public": "build",
    "rewrites": [
      {
        "source": "/images/**",
        "destination": "https://images.google.com/images/**"
      }
    ]
  }
}

• 修改完成后重新执行firebase deploy部署即可，原有前端请求代码无需做任何调整。

如果上述重写规则触发谷歌反爬限制无法正常返回结果，可以部署极简Firebase云函数做请求转发：

• 在Firebase云函数目录的index.js中添加如下代码：

const functions = require("firebase-functions");
const axios = require("axios");
const cors = require("cors")({origin: true});

exports.proxyGoogleImage = functions.https.onRequest((req, res) => {
  cors(req, res, async () => {
    const query = req.query.q;
    const response = await axios.get(`https://images.google.com/images?um=1&hl=en&nfpr=1&q=${query}`);
    res.send(response.data);
  });
});

• 部署云函数后，将前端的请求地址替换为云函数的访问地址即可，本地和线上环境都可以正常使用。

注意：直接爬取谷歌图片搜索页面的方案可能随时触发反爬限制，长期使用更建议对接谷歌官方的自定义搜索API，有免费额度可供个人开发使用。

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