使用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问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我搜索了整个StackOverflow,看到了类似的问题,但没有找到有效的解决方案。想知道有没有人有可行的解决方案?我正在本地主机:3000上开发一个Create Reaction应用程序,并尝试通过我的Apollo客户端访问不同站点上的URI(我正在使用https://developer.github.com/v4/explorer/进行测试)。
我已经将‘no-CORS’的fetchOptions模式添加到我的新ApolloClient实例中,但在我的控制台中仍然收到一个CORS错误。我的enitre 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策略已阻止访问从源https://developer.github.com/v4/explorer/‘获取http://localhost:3000’:对印前检查请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头。如果不透明的响应满足您的需求,请将请求的模式设置为‘no-CORS’,以在禁用CORS的情况下获取资源。
推荐答案
为了使CORS正常工作,需要将服务器配置为支持您的主机(在本例中为本地主机)。但是,服务器到服务器的通信不需要CORS,因此您通常需要设置代理。
Create-Reaction-App内置支持设置这样的代理:https://create-react-app.dev/docs/proxying-api-requests-in-development/。
这篇关于使用LOCALHOST:3000访问不同URL上的GraphQL API时出现CORS问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文