Question

我整天都在本地计算机上设置ssl。我正在运行一个wamp堆栈以在本地构建用于测试的api。该端点现已为ssl设置，并且可以完美运行。我有一个简单的路由设置，可以返回json响应。

class updateCityCouncil(graphene.Mutation): mayor = graphene.String() treasurer = graphene.String() class Arguments: mayor = graphene.String() treasurer = graphene.String() def mutate(self, info, id, **kwargs): this_council=CityCouncil.objects.get(id=id) if not this_council: raise Exception('CityCouncil does not exist') for prop in kwargs: setattr(this_council, prop, kwargs[prop]) this_council.save return updateCityCouncil( mayor=this_council.mayor, treasurer=this_council.treasurer )

通过访问该地址可以通过Firefox运行。

现在，我正在运行一个React应用

https://localhost/api/test

我遇到的问题是我正在尝试localhost:3000 api并使用在React网站（https://reactjs.org/docs/faq-ajax.html）上找到的示例。这是代码，但是非常简单。

fetch()

最重要的是，如果我看一下控制台，我会从请求中获得 200 响应代码，以及具有正确数据的实际 JSON 响应。 ..但由于某种原因，在应用程序中尝试获取资源时正在打印 NetworkError。

如果没有得到正确的响应或代码，我会理解该错误，但这根本没有道理。

任何建议都会对您有所帮助！

Answer 1

好吧，这似乎是CORS问题...由于所有内容都是本地的，所以我认为这不会成为问题。我必须将以下内容添加到我的Flight Api后端。

Flight::before('json', function () {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET,PUT,POST,DELETE');
    header('Access-Control-Allow-Headers: Content-Type');
});

Answer 2

您必须确保在HTTP标头中启用了CORS（可以从服务器端进行此操作），对于客户端，您只需要编写模式：在获取api调用中为“ cors”，因为服务器会抛出错误并且您的浏览器将无法加载为请求的客户端提供的内容。

React Fetch：获取json结果，但显示网络错误

2 个答案: