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）。

Chrome：

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

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

---

这份文档可以帮助您 https://nuxtjs.org/faq/http-proxy - linchong

Answer 1

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

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

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

Answer 2

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

nuxt.config.js:

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

- linchong

Answer 3

正如错误信息所示：您需要在服务器中指定一个Access-Control-Allow-Origin头，以允许跨源请求（是的::3000和::8000是不同的源）。现代浏览器在请求另一个来源时会触发一个选项（预检）请求来检查访问-*标头。您必须至少回答这些OPTIONS请求，并提供一个访问控制头。 对于开发而言，Access-Control-Allow-Origin: localhost:3000应该是可以的。

有关CORS和浏览器OPTIONS请求的更多信息，请参见此处： https://enable-cors.org/ 为什么会发送OPTIONS请求，我能不能禁用它？

- TMFLGR

Answer 4

如@TMFLGR所提到的： 在您的服务器上添加一个OPTION-Request处理程序，并指定一个Access-Control-Allow-Origin Header。代理对于开发来说是可以的，但在生产环境中不应该这样做。

- BananaLama