使用 localhost:3000 在不同的 URL 访问 graphql API 时出现 CORS 问题

2023-12-19

我在 StackOverflow 上进行了搜索,看到了类似的问题,但没有找到可行的解决方案。想知道是否有人有可行的解决方案?我正在 localhost:3000 上开发一个创建反应应用程序,并尝试通过我的 Apollo 客户端访问不同站点上的 URI(我正在测试https://developer.github.com/v4/explorer/ 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();

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


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

Create-react-app 内置支持设置此类代理:https://create-react-app.dev/docs/proxying-api-requests-in-development/ https://create-react-app.dev/docs/proxying-api-requests-in-development/.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 localhost:3000 在不同的 URL 访问 graphql API 时出现 CORS 问题 的相关文章

随机推荐