Vue.js - 本地和生产中的 CORS 错误答案

【问题标题】：Vue.js - CORS error in local and productionVue.js - 本地和生产中的 CORS 错误
【发布时间】：2020-10-01 23:50:51
【问题描述】：

我有一个名为 request.js 的文件，

import axios from 'axios'

const baseURL = 'https://SOME_URL.com/api/'

const config = {
  baseURL,
  timeout: 10000,
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': '*',
  }
}

const request = axios.create(config)

export default request

我正在尝试在 Vuex Actions 中发送请求；

import request from '../request'

const actions = {
  postData(_, payload){
    return request.post('a-request-url', payload)
  }
}

发送 2 个请求并在我运行请求时引发 CORS 错误。 CORS 错误Access to XMLHttpRequest at 'https://crm.clinic/api/crm/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response

AND 2 个请求，例如；

真正的问题是，在将我的代码部署为生产环境时，cors 错误会持续不断。你能帮帮我吗？

【问题讨论】：

您必须在后端启用它。
@BeHappy 你是对的，但已经启用。我不明白什么时候我用 jQuery ajax 发送请求，或者用 Cors Chrome 扩展请求在 axios 中发送请求是有效的，但是这种方式不起作用。
阅读：github.com/axios/axios/issues/2345#issuecomment-548950488

标签： vue.js axios cors

【解决方案1】：

如果您阅读错误中的第二部分，它会说明问题所在。

请求头域 access-control-allow-origin 不允许预检响应中的 Access-Control-Allow-Headers

如您所见，您需要在预检响应中允许访问。预检请求是浏览器在发送您的实际 GET/POST/etc 请求之前执行的操作。在 devtools 的网络选项卡中，您有 2 个对 /login url 的请求。第一个是使用 OPTIONS 方法的预检。

要解决此问题，您需要确保后端服务器在其对 OPTIONS 请求的响应中返回 'Access-Control-Allow-Origin': 'http://localhost:8080' 标头。目前它只指定允许的方法和标头。您不需要将这些标头添加到您的 axios 请求中。

【讨论】：