将 Access-Control-Allow-Origin 标头添加到 vuejs CLI webpack 服务器答案

【问题标题】：Adding Access-Control-Allow-Origin headers to vuejs CLI webpack server将 Access-Control-Allow-Origin 标头添加到 vuejs CLI webpack 服务器
【发布时间】：2018-06-24 09:17:20
【问题描述】：

尝试使用来自几个不同资源的公共 API 数据并收到 CORS 错误：No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access.

尝试在 Vus.js cli webpack 中向开发服务器添加自定义标头。我试过添加

    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    },

在两个文件中：devServer 对象中的/build/webpack.dev.conf.js，以及dev 对象中的/config/index.js。

无论如何，错误仍然存在。

如何正确地将标头添加到 devServer？

【问题讨论】：

如果 "public api" 表示第三方，那么您误解了 CORS 的工作原理
我猜你的意思是我在这里所做的基本上是允许其他浏览器连接到我的服务器？因此，为了连接到不允许 CORS 的 API，我需要通过后端/服务器进行连接吗？还是……？
是的……基本正确

标签： javascript vue.js webpack vuejs2 vue-cli

【解决方案1】：

我知道这有点晚了，但是如果有人好奇，可以在Vue cli documentation找到解决方案：

“如果[configureWebpack]的值是一个Object，它将使用webpack-merge合并到最终的配置中。”

因此，在您的 vue.config.js 文件中，您可以使用键 devServer 包含此对象，这是 webpack-dev-server 选取的一组选项：

vue.config.js：

module.exports = {
  configureWebpack: {        
    devServer: {
      headers: {
        'Access-Control-Allow-Origin': '*'            
      }
    }
  },
  someOtherConfigStuff: someOtherConfigStuffValues,      
  ...
}

【讨论】：

【解决方案2】：

这是服务器端的问题。它应该在服务器中解决。我主要使用 Tomcat 服务器。所以，这是我经常看到的问题。

如果你使用 curl 或类似 POSTMAN 的东西发出 API 请求并且得到了很好的响应，那么这意味着它肯定是你需要在 API 服务器端添加的东西，而不是在 Vue 端。

否则，请仔细检查您发送的请求。

【讨论】：