ExtJS 5应用程序+ Django休息框架CORS错误更改商店的URL时 [英] ExtJS 5 application + Django rest framework CORS error when changing URL of store

问题描述

我正在开发一个使用Django-rest-framework服务的ExtJS应用程序。我使用CORS标头来允许从服务中获取数据（ https://github.com/OttoYiu / django-cors-headers ）。

发生什么事是在某个时间点我想从商店更改URL。当我这样做时，我会收到以下错误：

  XMLHttpRequest无法加载http://10.98.0.241:8000/reacsearch/作为_dc = 1418831884352&安培;页= 1&安培;开始= 0&安培;限制= 25。该请求已重定向到http://10.98.0.241:8000/reacsearch/as/?_dc=1418831884352&page=1&start=0&limit=25，对于需要预检的跨原始请求，该请求不允许。 
  

在settings.oy中，为CORS定义以下属性

  CORS_ALLOW_METHODS =（
'GET'，
'OPTIONS'
）
 
 CORS_ORIGIN_ALLOW_ALL = True 
  

当我使用URL列出数据库中的所有元素时，这可以正常工作，但是当我更改存储另一个URL我得到上面的错误。此外，该链接在浏览器中正常工作。

商店网址更改方式如下：

  var store = Ext.getStore（storeName）; 
 store.getProxy（）。setUrl（newURL）; 
 store.load（）; 
  

视图之间的区别是在应用程序上工作的两个是视图集，而另一个只是一个通用列表

  class Example1viewset（viewsets.ModelViewSet）：

 API endpoing 

 queryset = examples1.objects.all（）
 serializer_class = Example1Serializer 
 
 class Example1SearchList（generics.ListAPIView）： 
 serializer_class = Example1Serializer 
 
 def get_queryset（self）：
 queryset = Example.objects.all（）
 
如果'attr'in self.kwargs ：
 queryset = queryset.filter（Q（attribute1__contains = self.kwargs ['attr']）| Q（attribute2__contains = self.kwargs ['abbr']）
 
 return queryset 
  

正如我所提到的，这两个示例在浏览器中工作正常（甚至通过网络中的其他计算机访问），但是在应用中当更改存储的URL时，我得到CORS错误。有没有人知道为什么会发生这种情况？

谢谢。

编辑： strong>

只是为了澄清，问题不在于更改商店的网址。当我尝试将这些URL设置为默认值，但是从应用程序访问时它们不起作用。

我的urls.py文件：

  router = router.DefaultRouter（）
 router.register（r'example'，views.Example1ViewSet）
 
＃Wire我们的API使用自动URL路由。 
＃另外，我们还包括可浏览的API的登录URL。 
 urlpatterns = [
 url（r'^'，include（router.urls）），
 url（r'^ reacsearch /（？P< attr>。+）/ $'例子1SearchList.as_view（）），
 url（r'^ api-auth /'，include（'rest_framework.urls'，namespace ='rest_framework'））
  pre> 
 
 
可以这个问题与我没有将搜索列表添加到路由器的事实有关吗？ 
 
 
 
  Edit2  
 
 
 
自从我尝试从不同的域。我将商店的类型改成了Extjs中的jsonp，我也允许我的休息服务以jsonp的形式呈现数据。
 
 
 
只要提醒一下，如果有人遇到同样的问题，有必要在商店网址中添加？format = jsonp：
  http：// my / url /？format = jsonp 
  
 
 
解决方案
由于它看起来像一个替代解决方案，将解释这个问题似乎是什么以及为什么这个替代方法可行。
 
 
 XMLHttpRequest无法加载第一个url 。该请求被重定向到'第二个url '，这对于需要预检的跨原始请求是不允许的。
 
 
这里的问题是，您正在告诉Django强制执行尾部斜线，这使得它自动重定向网址，而不使用尾部斜线到具有尾部斜杠的网址，假设存在一个。这就是为什么如错误所述，请求被重定向到第二个url，您可以告诉它有缺少的尾部斜杠。这由  APPEND_SLASH  Django设置，默认情况下 True  
 
 
 
问题是，当CORS正在进行预检请求，这是允许它确定是否可以进行请求，请求URL上必须有一个有效的响应 。因为您正在重定向请求，所以预检要求失败，您的信息就会停止。
 
 
 
您可以通过在代码中添加尾部斜杠来修复此问题。似乎有一些解决方案这样做与ext ，但我个人不能推荐一个具体的。您也可以手动设置网址以使用尾部斜杠，这听起来像您之前所做的那样。
 
 
 
 或者您可以使用JSONP ...  
 
 
 
您已找到替代解决方案，即使用JSONP提出请求而不是依赖于CORS。这将绕过预检问题并在所有主流浏览器中运行，但有一些缺点要考虑。您可以查看关于CORS vs JSONP的信息 。
 
 
 
如果要对API进行任何更改，您将需要CORS，因为JSONP仅支持 GET 请求。还有其他优点，例如中止请求的能力，也是CORS附带的。
 
I am developing a ExtJS application that uses a Django-rest-framework service. I am using CORS headers to allow fetching the data from the service (https://github.com/OttoYiu/django-cors-headers).

What happens is that at a point in time I want to change the URL from the store. And when I do that I get the following error:
XMLHttpRequest cannot load http://10.98.0.241:8000/reacsearch/as?_dc=1418831884352&page=1&start=0&limit=25. The request was redirected to 'http://10.98.0.241:8000/reacsearch/as/?_dc=1418831884352&page=1&start=0&limit=25', which is disallowed for cross-origin requests that require preflight.
In the settings.oy I define the following properties for the CORS
CORS_ALLOW_METHODS = (
        'GET',
        'OPTIONS'
    )

CORS_ORIGIN_ALLOW_ALL = True
This works fine when I use URLs to list all the elements in my database, however when I change the store for another URL I get the error above. Also the link works fine in the browser.

The store url change is made this way:
var store = Ext.getStore(storeName);
store.getProxy().setUrl(newURL);
store.load();
The difference between the views, is that the two that work on the application are viewsets, while the other is just a generic list
class Example1viewset(viewsets.ModelViewSet):
    """
    API endpoing that allows metabolites to be viewed.
    """
    queryset = examples1.objects.all()
    serializer_class = Example1Serializer

class Example1SearchList(generics.ListAPIView):
    serializer_class = Example1Serializer

    def get_queryset(self):
        queryset = Example.objects.all()

        if 'attr' in self.kwargs:
            queryset = queryset.filter(Q(attribute1__contains=self.kwargs['attr']) | Q(attribute2__contains=self.kwargs['abbr']))

        return queryset
Like I mentioned both examples work fine in the browser (even accessing through other computers in the network), however in the application when changing the URL of the store I get the CORS error. Does anyone has any idea why this is happening?

Thank you.

Edit:

Just for clarification, the problem is not in changing the url of the store. As I tried to set those urls as defaults, but they are not working when accessing from the application.

My urls.py file:
router = routers.DefaultRouter()
router.register(r'example', views.Example1ViewSet)

# Wire up our API using automatic URL routing.
# Additionally, we include login URLs for the browsable API.
urlpatterns = [
    url(r'^', include(router.urls)),
    url(r'^reacsearch/(?P<attr>.+)/$', Example1SearchList.as_view()),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework'))
Can it be that the problem is related with the fact that I am not adding the search list to the router? 

Edit2

Problem solved since I was trying to fetch data from a different domain. I changed the type of store to jsonp in Extjs, and I also allowed my rest service to render data as jsonp.

Just a reminder if anyone comes accross this same problem, it is necessary to add ?format=jsonp to the store url:
http://my/url/?format=jsonp

解决方案
Since it looks like an alternate solution was found, I'll explain what the issue appeared to be as well as why the alternative works.

  
XMLHttpRequest cannot load first url. The request was redirected to 'second url', which is disallowed for cross-origin requests that require preflight.
The issue here is that you are telling Django to enforce the trailing slash, which makes it automatically redirect urls without a trailing slash to urls with a trailing slash, assuming that one exists. This is why, as stated in the error, the request was redirected to the second url, which you can tell has the missing trailing slash. This is controlled by the APPEND_SLASH Django setting which is True by default.

The problem is that when CORS is doing a preflight request, which is what allows it to determine if the request can be made, there must be a valid response at the requested URL. Because you are redirecting the request, the preflight request fails and you're stuck without your information.

You can fix this by adding the trailing slash in your code. There appear to be a few solutions for doing this with ext, but I personally can't recommend a specific one. You can also manually set the url to use the trailing slash, which sounds like what you were doing previously.

Or you can use JSONP...

You've found the alternative solution, which is to use JSONP to make the request instead of relying on CORS. This gets around the preflight issue and works in all major browsers, but there are some drawbacks to consider. You can find more information on CORS vs JSONP by looking around.

You're going to need CORS if you want to push any changes to your API, as JSONP only supports GET requests. There are other advantages, such as the ability to abort requests, that also comes with CORS.

                        
这篇关于ExtJS 5应用程序+ Django休息框架CORS错误更改商店的URL时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！