CORS 缺少允许来源

Question

我的服务器（用 Django 编写）在 http://localhost:8000 运行。

Nuxt 应用程序正在 http://localhost:3000 运行。

当我向服务器发送请求（如 http://localhost:8000/api/v1/user/position/ ）时，我在 firefox 浏览器中收到以下错误。

跨源请求被阻止：同源策略不允许读取位于 http://localhost:8000/api/v1/user/position/ 的远程资源。 （原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。

火狐：

铬合金：

我看到了 这个链接 和 这个 但我不知道问题出在哪里？

下面是我的 nuxt.config.js 文件的一部分。

 modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
],
axios: {
    baseURL: 'http://localhost:8000/api/v1/',
},

以及我发送请求的功能：

 async getAllPosition() {
    this.loading_position = true;
    await this.$axios.get('user/position/').then(response => {
          this.position = response.data;
    }).finally(() => {
         this.loading_position = false;
        })
 }

我认为这是关于代理的，但我不知道如何配置它。

原文由 Saeed 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如 @BananaLama 和 @TMFLGR 在他们的回答中提到的：

我需要在我的 Django 服务器中指定 Access-Control-Allow-Origin 标头，以允许跨源请求。为此，我使用 django-cors-headers 包。

 pip install django-cors-headers

然后在 settings.py 部分允许它，结果很好地返回了。

 // settings.py

INSTALLED_APPS = [
    ...
    'corsheaders',
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

CORS_ALLOWED_ORIGINS  = [
    "http://localhost:3000",
]

结果：

原文由 Saeed 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

正如@TMFLGR 提到的：向您的服务器添加一个 OPTION-Request 处理程序并指定 Access-Control-Allow-Origin Header 。代理适用于开发，但在生产中你不应该这样做。

原文由 BananaLama 发布，翻译遵循 CC BY-SA 4.0 许可协议