Question

目标：将vue.js连接到Wagtail-API /页面。

我已根据setup guide配置了wagtail API v2，但是，Vue-resource get请求无效。

控制台错误：

Failed to load http://localhost:8000/api/v2/pages/: Response to preflight
request doesn't pass access control check: No 'Access-Control-Allow-Origin' 
header is present on the requested resource.

搜索错误让我相信我应该实现CORS。但是，我看过一些Django_rest + Vue.js教程，没有人提到过CORS。是否真的有必要实施CORS？另外，我应该使用Axios而不是vue-resource吗？

下面的相关vue.js和wagtail-API代码：

以下HTML基于this教程。打印当前页面，但我请求的页面不打印。

HTML / Django_template：

{% extends "base.html" %}
{% load static wagtailcore_tags %}

{% block content %}
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.0"></script>

<div id="test">
    <ul>
        <li v-for="print_test in pages">
            <p> [[print_test]]</p>
        </li>
    </ul>
</div>


<script type="text/javascript">
var app=new Vue({
    el: "#test",
    delimiters: ['[[', ']]'],
    data: function(){
            return {
            search: '',
            pages: [
              { id: '1', title: 'one'},
              { id: '2', title: 'two'},
              { id: '3', title: 'three'}
            ]};
    },

    http: {
        root: 'http://localhost:8000',
        headers: {
            Authorization: 'CAUSING ERROR...'
        }
    },

    methods: {
        getPages: function () {
            this.$http.get('api/v2/pages/?type=blog.blogpage').then(function (data,status,request) 
            {
            if (status == 200) {
                this.pages = data;
                console.log(data);
             }   
            })
        }
    },

    mounted: function () {
        this.getPages();
    }

    });
</script>
{% endblock %}

以下内容涵盖了我的API设置 - 如果我错过了某些内容，我会提供。

设置/ base.py：

INSTALLED_APPS = [
    'rest_framework',
    'wagtail.api.v2',
]

api.py：

from wagtail.api.v2.endpoints import PagesAPIEndpoint
from wagtail.api.v2.router import WagtailAPIRouter
from wagtail.wagtailimages.api.v2.endpoints import ImagesAPIEndpoint
from wagtail.wagtaildocs.api.v2.endpoints import DocumentsAPIEndpoint

api_router = WagtailAPIRouter('wagtailapi')

api_router.register_endpoint('pages', PagesAPIEndpoint)
api_router.register_endpoint('images', ImagesAPIEndpoint)
api_router.register_endpoint('documents', DocumentsAPIEndpoint)

urls.py：

from .api import api_router
urlpatterns = [
    url(r'^api-auth/', include('rest_framework.urls')),
    url(r'^api/v2/', api_router.urls),
    url(r'', include(wagtail_urls)),
]

博客/ model.py：

from django.db import models
from django.http import HttpResponse
from wagtail.api import APIField

class BlogPage(Page):
    date = models.DateField("Post date")
    intro = models.CharField(max_length=250)
    body = RichTextField(blank=True)
    tags = ClusterTaggableManager(through=BlogPageTag, blank=True)
    categories = ParentalManyToManyField('blog.BlogCategory', blank=True)

Answer 1

我不知道为什么localhost存在问题。但是，我终于幸运了，以下工作了！

methods: {getPages: function () {
               this.$http.get('http://127.0.0.1:8000/api/v2/pages/').then(
                   response => {this.pages = response.data})}
        },

有趣的提示：使用localhost时仍会传递数据，但是仍然会弹出错误。

Wagtail API- Vue.js获得请求授权？

1 个答案: