Vue CLI3启用CORS配置求助：集成Blockstack登录遇跨域问题

嘿，完全懂你被这个CORS问题卡两天的崩溃感！这就给你几个基于Vue CLI配置的解决方案，亲测能解决Blockstack登录时的manifest跨域问题：

Blockstack的登录服务是从外部域名请求你的manifest.json，浏览器的同源策略会直接拦截。我们可以通过vue.config.js给开发服务器配置允许跨域的响应头，同时把static目录的资源映射到根路径，让http://localhost:8080/manifest.json能正常访问。

在项目根目录的vue.config.js里添加以下代码（如果没有这个文件就新建一个）：

module.exports = {
  devServer: {
    // 允许所有域名跨域访问开发服务器（开发环境用*没问题，生产环境要限制具体域名）
    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'
    },
    // 将static目录映射到根路径，确保manifest.json能通过根URL访问
    static: {
      directory: './static',
      publicPath: '/'
    }
  }
}

配置完后必须重启开发服务器，然后访问http://localhost:8080/manifest.json确认能正常返回文件，再测试Blockstack登录功能。

如果Blockstack要求必须请求http://localhost/manifest.json（不带8080端口），那我们可以把Vue开发服务器的端口改成80：

修改vue.config.js：

module.exports = {
  devServer: {
    port: 80,
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    static: {
      directory: './static',
      publicPath: '/'
    }
  }
}

注意：80端口是系统默认端口，启动时需要管理员权限：

• Windows：用管理员身份打开命令提示符再运行npm run serve
• Mac/Linux：运行sudo npm run serve

这样你的应用就跑在http://localhost，manifest.json也在根路径，Blockstack能直接访问，完全避开跨域问题。

别忘了确认你的manifest.json内容符合Blockstack的要求，至少要包含以下字段（示例）：

{
  "name": "我的Vue Blockstack应用",
  "start_url": "http://localhost:8080", // 或者http://localhost，根据你的端口配置
  "description": "集成Blockstack登录的Vue应用",
  "icons": [
    {
      "src": "/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "display": "standalone"
}

内容的提问来源于stack exchange，提问作者Code Tree