本地Vue fetch被CORS拦截但reqbin/PHP cURL同参数请求正常如何解决

• CORS是浏览器专属的同源安全限制机制，仅对浏览器环境中运行的前端JavaScript代码生效，PHP cURL、Reqbin发起的请求均属于服务端侧发起的HTTP请求，天然不受CORS策略约束。
• 你当前的请求携带了自定义Authorization请求头，不属于浏览器规定的简单请求范畴，因此浏览器会自动先发送OPTIONS预检请求校验跨域权限，而你调用的目标API未配置Access-Control-Allow-Origin等跨域相关响应头，因此预检不通过被拦截。
• Reqbin能正常请求的本质是其平台后台服务代为发起请求，再将结果返回给前端页面，并非你本地浏览器直接向目标API发起跨域请求，因此不会触发CORS校验。

由于你没有目标API的配置权限，无法通过修改API侧配置开启跨域，可选择以下方案规避问题：

1. 本地开发阶段配置Vue开发代理
   如果是Vite搭建的项目，在vite.config.js中新增如下代理配置：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://你替换后的实际域名',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

如果是Vue CLI搭建的项目，在vue.config.js中新增如下配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://你替换后的实际域名',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

配置完成后，将你代码中fetch的请求地址改为/api/json-api/uapi_cpanel?api.version=1&cpanel.function=add_pop&cpanel.module=Email即可，开发环境下请求会被本地代理转发到目标API，绕过跨域限制。

注意：该方案仅适用于本地开发阶段，生产环境不生效。

2. 生产环境配置反向代理
   项目上线部署时，可在你的前端站点对应的Nginx、Caddy等Web服务中配置反向代理，规则和开发代理逻辑一致，将/api前缀的请求转发到目标API，即可在生产环境规避跨域问题。

3. 自行搭建后端中转接口
   如果无法配置反向代理，可自行开发一个简单的后端接口，前端先请求你自己的后端接口，后端再代为调用目标API后将结果返回给前端，服务端发起的请求不受CORS限制，也可解决问题。

注：不要使用报错提示的no-cors模式，该模式下你无法获取到请求的响应数据，仅能拿到不透明的响应结果，不适用于你的业务场景。

内容的提问来源于stack exchange，提问作者Charlotte Wells