cors - 使用 localhost:3000 在不同的 URL 访问 graphql API 的 CORS 问题
问题描述
我搜索了整个 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 的资源。
解决方案
由于 API 端点的 Access-Control-Allow-Origin 中可能没有“localhost”,因此您必须在简单和干净的解决方案之间进行选择。
--disable-web-security
简单的解决方案:如果只是出于开发目的,您可以考虑使用设置标志的 Chrome 启动。然而,由于这大大降低了安全性,它应该只是用于开发目的的临时解决方案。干净的解决方案:如果 API 端点没有
Access-Control-Allow-Origin: '*'
,则没有真正的方法可以完全使用浏览器中的数据。考虑让应用程序的后端将请求发送到 API 端点,然后将结果提供给前端。
推荐阅读
- python - Pytorch 可微分条件(基于索引)和
- google-chrome - Sec-Fetch-Mode 和阻塞的 CORS
- java - 如何使用 Java 修改现有 Excel 工作簿
- php - 如何向 WooCommerce 产品属性添加额外信息?
- tensorflow - 使用估计器训练自定义 kera 模型时如何打印指标值?
- content-security-policy - CSP 报告中的状态 200 是什么意思?
- continuous-integration - 合并成功后触发?
- laravel - 谷歌地图 api 和谷歌搜索提供不同纬度的地方
- php - 在 IIS 上使用 htpasswd 和 PHP
- javascript - 将插入符号放在以前的可编辑 div 中并按 Enter 应该重新评估该输入