如何为 React Native 应用程序设置 Access-Control-Allow-Origin答案

【问题标题】：How to set Access-Control-Allow-Origin for a ReactNative App如何为 React Native 应用程序设置 Access-Control-Allow-Origin
【发布时间】：2020-09-04 00:35:00
【问题描述】：

该应用在几周前运行良好，但现在可以

Access to XMLHttpRequest at
  'https://api.yelp.com/v3/businesses/search?limit=50&term=black+lives&location=cambridge+MA' 
from origin 'http://localhost:19006' has been blocked by CORS policy:
  Response to preflight request doesn't pass access control check: 
    No 'Access-Control-Allow-Origin' header is present on the requested resource.

对于 ReactNative Expo 应用程序 - 即没有 index.js 或 index.html 等。如何修复和
鉴于我当前的应用程序结构是：

api设置：

import axios from 'axios';
import Constants from 'expo-constants';
export default axios.create({
  baseURL: 'https://api.yelp.com/v3/businesses',
  headers: {
    Authorization: 'Bearer ' + process.env.EXPO_YELP_API_KEY }
}

我在拨打电话时使用...await yelp.get('/search', {...

我运行网络浏览器模拟器来查看页面

【问题讨论】：

标签： javascript reactjs react-native expo

【解决方案1】：

我认为问题出在 API 方面，而不是前端应用。

我尝试在该端点上执行 Ajax 请求，它看起来不包含 Access-Control-Allow-Origin 标头

如果该标题存在，它通常应该类似于：

此示例来自我的 API，它允许所有来源，其中 null 是我的来源，因为我在我的文件系统（而不是 Web 服务器）上执行了此操作

所以简而言之，您需要配置 API 以允许来自 http://localhost:19006 的请求

【讨论】：