Vue使用axios调用UUID生成API出现CORS跨域错误该如何解决？

• 你在请求头中添加的Access-Control-Allow-Origin、Access-Control-Allow-Headers属于服务端响应头，前端不需要携带，错误添加会触发浏览器预检请求，反而加剧跨域拦截问题。
• 目标接口https://www.uuidtools.com/api/generate/v1没有配置允许跨域访问，浏览器的同源策略会直接拦截从http://localhost:8080发起的直接请求，你收到的报错也明确说明了这一点：

Access to XMLHttpRequest at 'https://www.uuidtools.com/api/generate/v1' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

1. 开发环境临时适配：配置Vue本地代理 #

Vue脚手架的开发服务器自带代理转发能力，可以绕过跨域限制，操作步骤如下：

1. 在项目根目录新建/修改vue.config.js文件，添加如下配置：

module.exports = {
  devServer: {
    proxy: {
      '/uuid-api': {
        target: 'https://www.uuidtools.com',
        changeOrigin: true,
        pathRewrite: { '^/uuid-api': '' }
      }
    }
  }
}

2. 修改你的请求代码，删除多余的请求头，改为请求代理路径：

generateUUID() {
  axios.get('/uuid-api/api/generate/v1')
    .then(response => console.log(response))        
},

3. 重启本地开发服务，即可正常拿到返回结果。

2. 生产环境适配方案 #

• 由你的业务后端服务代理请求该UUID接口，前端请求同域名的后端接口即可，不会触发跨域
• 更换支持跨域访问的UUID生成公共接口

3. 最优方案：前端本地生成UUID #

生成UUID不需要依赖外部接口，直接在前端安装工具包即可完成，完全不存在跨域问题，性能和稳定性更高：

1. 安装uuid依赖：
   npm install uuid
2. 引入使用：

import { v1 as uuidv1 } from 'uuid';

generateUUID() {
  const uuid = uuidv1()
  // 直接得到符合标准的v1版本UUID，不需要接口请求
  console.log(uuid)
},

内容的提问来源于stack exchange，提问作者Hamza Mughal