Postman调用Google Place API正常，前端fetch触发CORS报错如何解决？

• Google Place API的Web服务接口本身不支持浏览器端直接发起跨域请求，接口返回的响应头没有携带Access-Control-Allow-Origin相关CORS许可头，浏览器的同源策略会直接拦截该类请求。Postman不属于浏览器运行环境，不受同源策略限制，因此可以正常拿到返回结果。
• 控制台提示的设置mode: 'no-cors'无法解决你的需求：该模式下只能拿到不透明响应，无法读取接口返回的实际数据，也不能执行res.json()解析操作。

• 方案1：改用Google Maps JavaScript官方SDK调用Places服务
  这是Google官方推荐的前端调用方式，SDK内部已经处理了跨域适配问题，不需要直接请求Web Service接口，按要求引入SDK并配置API密钥后，直接调用内置的Places相关查询方法即可获取目标数据。
• 方案2：自行搭建后端代理层
  前端将请求发送到你自己的后端服务，由后端服务发起请求调用Google Place API，拿到结果后再返回给前端。服务端发起HTTP请求不存在CORS限制，可正常获取接口返回数据。
• 方案3：本地开发临时调试可启动浏览器禁用CORS安全策略，注意该方案仅可用于本地测试，绝对不能用于生产环境。

你当前代码中console.log(pharmacyList.candidates[0].position)的写法存在逻辑问题：React的setPharmacyList是异步更新state的操作，调用完成后立即读取pharmacyList拿不到最新的接口返回值，你可以直接打印data的对应字段，或者单独通过useEffect监听pharmacyList的变化后再执行打印操作。

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