使用 localhost:3000 在不同的 URL 访问 graphql API 的 CORS 问题答案

【问题标题】：CORS issue with using localhost:3000 to access graphql API at a different URL使用 localhost:3000 在不同的 URL 访问 graphql API 的 CORS 问题
【发布时间】：2020-01-12 16:41:38
【问题描述】：

我在 StackOverflow 上进行了全面搜索，看到了类似的问题，但没有找到可行的解决方案。想知道是否有人有可行的解决方案？我正在 localhost:3000 上开发一个 create react 应用程序，并尝试通过我的 Apollo 客户端访问不同站点上的 URI（我正在使用 https://developer.github.com/v4/explorer/ 进行测试）。

我已将“no-cors”的 fetchOptions 模式添加到我的新 ApolloClient 实例中，但我的控制台中仍然出现 CORS 错误。我的整个 index.js 文件如下：

import React from 'react';
import ReactDOM from 'react-dom';

import { ApolloProvider } from 'react-apollo';
import { ApolloClient, HttpLink, InMemoryCache } from 'apollo-boost';

import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';


const client = new ApolloClient({
    link: new HttpLink({ uri: 'https://developer.github.com/v4/explorer/' }),
    fetchOptions: {
        mode: 'no-cors',
      },
    cache: new InMemoryCache()
  });
  
  const AppWithProvider = () => (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  );
ReactDOM.render(<AppWithProvider />, document.getElementById('root'));


serviceWorker.unregister();

控制台中的错误消息： CORS 策略已阻止从源“http://localhost:3000”获取“https://developer.github.com/v4/explorer/”的访问权限：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

【问题讨论】：

您正在发出跨域请求，您必须遵守 CORS 政策。设置 mode: 'no-cors' 不会神奇地规避现代 Web 浏览器强制执行的 CORS 策略。如果https://developer.github.com 没有设置AccessControl-Allow-Origin 标头，则您无法对该资源进行跨域请求。
@JakeHolzinger 您的评论对这个问题没有帮助，因为您与 Apollo Client 一起使用的任何公共 API 在 localhost 开发中都会出现此 CORS 错误。请尝试使用上面的设置重新创建它，以便您可以看到问题所在。如果您可以提供一个解决方案，而不是使用这种确切的 Apollo 设置，说明您如何使用任何公共 API 在本地进行开发，而不会出现 CORS 问题，那将会更有帮助。
API 开发者可以选择是否接受跨域请求。我没有一个神奇的解决方案可以让跨域请求适用于每个 API。您可以实现自己的 API，然后从服务器向 github API 发出请求，但在浏览器中您无法决定服务器响应是什么。

标签： cors graphql create-react-app react-apollo apollo-client

【解决方案1】：

由于 API 端点的 Access-Control-Allow-Origin 中可能没有“localhost”，因此您必须在简单和干净的解决方案之间做出选择。

简单的解决方案：如果只是出于开发目的，您可以考虑开始，例如设置了 --disable-web-security 标志的 Chrome。 然而，由于这大大降低了安全性，它应该只是用于开发目的的临时解决方案。
干净的解决方案：如果 API 端点没有Access-Control-Allow-Origin: '*'，则没有真正的方法可以完全使用浏览器中的数据。考虑让您的应用程序的后端将请求发送到 API 端点，然后将结果提供给您的前端。

【讨论】：

【解决方案2】：

为了使 CORS 工作，需要将服务器配置为支持您的主机（在本例中为 localhost）。但是，服务器到服务器的通信不需要 CORS，因此您通常要做的是设置代理。

Create-react-app 内置支持设置这样的代理：https://create-react-app.dev/docs/proxying-api-requests-in-development/。

【讨论】：