使用 localhost :3000 to access graphql API at a different URL 的 CORS 问题

Question

我在 StackOverflow 上到处搜索，看到了类似的问题，但没有找到有效的解决方案。想知道是否有人有有效的解决方案？我正在 localhost:3000 上开发一个 create react 应用程序，并尝试通过我的 Apollo Client 访问不同站点上的 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();

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

Answer 1

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

简单的解决方案:如果只是出于开发目的，您可以考虑开始例如Chrome 与 --disable-web-security标志设置。 但是，由于这会大大降低安全性，因此它应该只是用于开发目的的临时解决方案 .

干净的解决方案:如果 API 端点没有 Access-Control-Allow-Origin: '*' ，没有真正的方法可以完全使用浏览器中的数据。考虑让您的应用程序的后端将请求发送到 API 端点，然后将结果提供给您的前端。