CORS 缺少允许来源答案

【问题标题】：CORS Missing Allow OriginCORS 缺少允许来源
【发布时间】：2021-04-28 11:42:14
【问题描述】：

我的服务器（用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”）。

火狐：

铬：

我看到this link和this但不知道问题出在哪里？

以下是我的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;
        })
 }

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

【问题讨论】：

这篇文档可以帮到你nuxtjs.org/faq/http-proxy

标签： vue.js cors nuxt.js django-cors-headers

【解决方案1】：

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

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

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",
]

结果：

【讨论】：

【解决方案2】：

正如错误消息所示：您需要在服务器中指定 Access-Control-Allow-Origin-header 以允许跨源请求。（是的 ::3000 和 ::8000 是不同的来源）。现代浏览器将在请求另一个来源时触发一个选项（飞行前）请求以检查 Access-* 标头。您必须至少使用 Access-Control 标头来回答这些 OPTIONS 请求。 Access-Control-Allow-Origin: localhost:3000 应该适合开发。

更多关于 CORS 和浏览器选项的请求在这里：
https://enable-cors.org/
Why is an OPTIONS request sent and can I disable it?

【讨论】：

【解决方案3】：

您可以设置转发代理来处理跨域

nuxt.config.js：


export default {
  ...
  proxy: {
    '/api': { 
      target: 'http://localhost:8000',
      pathRewrite: {
        '^/api': '/api',
        changeOrigin: true
      }    
    }
  },
}

【讨论】：

【解决方案4】：

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

【讨论】：