如何在Nuxt.js中使用AXIOS调用Dunzo开发者API时解决CORS跨域问题

根本原因 #

浏览器同源策略会拦截前端页面直接向第三方域名发起的请求，Dunzo开发者API本身是设计给服务端调用的，不会配置允许前端跨域的响应头，因此直接从前端发起请求必然触发CORS错误。
额外安全提醒：client-secret是你的接口调用凭证，明文放在前端代码中会被任意用户抓取，存在凭证被盗用的严重风险

正式上线解决方案（唯一安全可用的方案） #

• 新增一层你自己的后端服务作为代理：前端不直接请求Dunzo的API，而是先请求你自己的后端接口
• 由你的后端服务发起请求调用Dunzo的API，服务端发起的HTTP请求不受浏览器同源策略限制，天然不会出现CORS问题
• 后端拿到Dunzo的响应结果后，再返回给前端即可
• 如果你当前的这段代码本身就是写在Node.js后端的，需要确认你的后端服务给调用它的前端域名配置了跨域响应头，以Express为例配置参考：

// 先安装cors依赖：npm install cors
const cors = require('cors');
const express = require('express');
const app = express();

// 全局允许跨域（开发环境用）
app.use(cors());

// 生产环境建议精准配置允许的前端域名
// app.use(cors({
//   origin: 'https://你的正式前端域名.com'
// }));

本地临时调试方案（禁止上线使用） #

如果仅需要本地开发阶段快速调试，可以用以下临时方案绕过CORS限制：

• 安装浏览器跨域插件，对当前调试页面禁用同源策略
• 启动Chrome浏览器时添加禁用安全模式参数：chrome --disable-web-security --user-data-dir=临时目录路径
• 用本地代理工具（Charles、Whistle等）给Dunzo的API响应添加允许跨域的响应头

注意：以上临时方案仅能用于本地调试，上线环境必须使用后端代理方案，否则会出现严重的安全漏洞和线上跨域问题。

内容的提问来源于stack exchange，提问作者Sadiq PK