Question

我在Django的heroku.com上设置了一个小型Web应用程序，它返回 JsonResponse ，你可以看到here.

 {
 name: "shubham",
 college: "MAIT",
 subject: "java"
 }

我还在我的计算机上本地设置服务器，该服务器接受JSON，并在此处附加HTML元素我的javascript文件：

    $(function (){
        $.ajax({
            type:'GET',
            url:'https://justgiveme.herokuapp.com/',
            dataType :"Json",
            contentType: "application/json; charset=utf-8",
            success: function(data) {
                alert("Success !");
            },
            error : function()
            {
                alert("failed !");
            }
        });
    });

但是当我打开localhost时，它会给我警告（“失败！”）而不是警告（“成功！”）; 。我检查了Chrome控制台，发现此错误：

任何有用的建议都很明显。

Answer 1

您需要在heroku应用上启用跨源资源共享（CORS）。现在它失败了，因为请求不是来自检索第一个资源的域。在您的情况下，127.0.0.1。

这是Django在CORS上的起点：http://www.django-rest-framework.org/topics/ajax-csrf-cors/

Answer 2

您看到的错误是因为浏览器发送预检请求以检查是否允许跨源请求。您可以在Chrome检查器中查看“网络”标签时看到它被发送。它将是对ajax中指定的url的OPTIONS请求。

为了解决此问题，服务器需要让浏览器知道允许跨源请求。为此，Django必须使用指定的 Access-Control-Allow-Origin 标头响应预检请求。标题的值必须是您要求的网站，或“*”以允许任何网站。

//Any website
Access-Control-Allow-Origin: *
//Specific website
Access-Control-Allow-Origin: http://www.example.com

Answer 3

资源在请求时发出跨域HTTP请求   来自与第一个资源不同的域的资源   本身服务。例如，提供的HTML页面   http://domain-a.com发出src请求   http://domain-b.com/image.jpg。今天网络上的许多页面加载   CSS样式表，图像和脚本等资源   域。

出于安全原因，浏览器会限制跨源HTTP请求   从脚本中启动。例如，XMLHttpRequest如下   同源政策。因此，使用XMLHttpRequest的Web应用程序   只能向自己的域发出HTTP请求。改善网络   应用程序，开发人员要求浏览器供应商允许XMLHttpRequest   制作跨域请求

您可以详细了解CORS here .

如何在Django中设置CORS的详细说明？

这是因为REST API中没有规定处理跨源资源请求（CORS）。要在REST API中启用它，我们需要Django REST Framework文档中建议的django-cors-headers。所需的最小设置如下。

第0步 - 安装django-cors-headers。

pip install django-cors-headers

第1步 - 在settings.py中，在INSTALLED_APPS元组中添加以下条目。

 INSTALLED_APPS = (
 '......',
 'corsheaders',
 '......'
)

第2步 - 在settings.py中，在MIDDLEWARE_CLASSES元组顶部添加以下条目。

 MIDDLEWARE_CLASSES = (
  'corsheaders.middleware.CorsMiddleware',
  'django.middleware.common.CommonMiddleware',
 )

第3步 - 在settings.py中添加以下标志变量

 CORS_ORIGIN_ALLOW_ALL = True

您可以在django here .

中阅读有关CORS的更多信息

我们完成了!!

如何解决Access-Control-Allow-Origin错误？

3 个答案: