devServer设置cors

在webpack中配置devServer的时候，可以通过设置`headers`来实现CORS（跨域资源共享）。

以下是一个示例配置：

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': 'Content-Type',
  },
},

这里的`Access-Control-Allow-Origin`设置了允许所有域名的请求，`Access-Control-Allow-Headers`设置了允许请求头为`Content-Type`的请求。你也可以根据需要进行自定义设置。

需要注意的是，这种方法只是在开发环境下起作用，因为在生产环境中应该使用nginx等服务器去设置CORS。

相关问题

webpack-dev-server CORS

Webpack Dev Server默认启用同源策略，即只允许来自同一域名下的请求访问资源。如果你需要跨域访问资源，可以通过配置webpack-dev-server的proxy选项来实现。

例如，在webpack-dev-server的配置文件中加入以下代码即可实现CORS跨域访问：

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      pathRewrite: {'^/api' : ''}
    }
  }
}

上述配置将所有以/api开头的请求代理到http://localhost:3000上，并将/api前缀去掉。这样，你就可以通过跨域访问http://localhost:8080/api下的资源了。

vue devserver proxy 端口不生效

Vue.js 的 DevServer 配置中的 `proxy` 功能用于代理请求到其他服务器，当你的前端应用需要访问后端 API 而不想直接暴露真实地址给开发者时非常有用。然而，有时候你可能会遇到代理设置不生效的情况，可能有以下几个原因：

1. **配置错误**：检查你的 `.vue.config.js` 或者 `scripts/dev-server.js` 文件中的 `devServer.proxy` 对象是否配置正确。确保目标 URL、路径替换和安全选项（如 `https`, `pathRewrite`等）都配置到位。

// .vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 后端API实际运行的地址
        changeOrigin: true,
        pathRewrite: { '^/api': '' }, // 如果有重写前缀，去掉它
      },
    },
  },
};

2. **跨域问题**：如果目标服务器设置了 CORS（跨源资源共享），你需要确认跨域策略是否允许来自 Vue 开发服务器的请求。

3. **重启服务**：有时候修改配置文件后需要重启开发服务器才会生效，尝试运行 `npm run serve` (或者 `yarn serve`) 来启动。

4. **网络问题**：确保本地网络连接正常，并且防火墙没有阻止对目标地址的访问。

5. **环境变量覆盖**：如果你在命令行指定了特定的代理，比如 `--proxy-config=custom-config.json`，那么 `proxy` 配置可能不会自动加载。

解决上述问题后，如果代理仍然未生效，你可以尝试清除浏览器缓存，然后重新访问受影响的API链接。如果还有疑问，可以提供具体的报错信息以便于诊断