Swagger Codegen生成的JavaScript客户端跨域请求Access-Control报错排查

从你给出的错误信息和代码来看，这个问题的核心是浏览器的跨域资源共享（CORS）限制，和你代码本身的写法关系不大，主要是服务器端的CORS配置没适配你的本地开发环境。

为什么会出现这个错误？ #

浏览器的同源策略会阻止从一个域名（这里是你的localhost本地服务）向另一个不同的域名/IP（81.2.241.234:8080）发起AJAX请求，除非目标服务器返回了正确的CORS响应头。你说Chrome直接访问URL能看到响应，但直接访问是浏览器的普通GET请求，不会触发CORS预检查；而Swagger生成的客户端用的是XMLHttpRequest发起请求，浏览器会先发一个OPTIONS预请求来验证权限，这时候如果服务器没正确处理这个预请求，或者返回的Access-Control-Allow-Origin不包含你的localhost源，就会触发这个错误。

解决方法分两种场景： #

1. 服务器端配置（推荐，生产环境必须）

联系API服务器的维护者，或者如果你有权限修改服务器配置，需要确保：

• 服务器返回的Access-Control-Allow-Origin头包含你的本地前端地址（比如http://localhost:5173，具体看你本地服务的端口），或者在开发环境临时设为*（生产环境不要用*，要指定具体域名）。
• 服务器正确处理OPTIONS请求，返回包含Access-Control-Allow-Methods（要包含GET）、Access-Control-Allow-Headers等必要的CORS头。
• 确认响应头里的Access-Control-Max-Age设置合理，减少预请求的次数。

2. 前端开发环境临时绕过（仅用于本地开发）

如果暂时无法修改服务器配置，可以用以下方法临时解决：

• 使用开发服务器代理：比如你用的是Vue/React/Vite/Webpack等工具，都可以配置代理，把前端的请求转发到目标服务器。举个Vite的配置例子：

  // vite.config.js
  export default {
    server: {
      proxy: {
        '/species': {
          target: 'http://81.2.241.234:8080',
          changeOrigin: true
        }
      }
    }
  }
  

  然后把Swagger生成的客户端的baseURL改成/，这样请求会先发到本地开发服务器，再被代理到目标服务器，就不会触发跨域限制了。
• Chrome跨域插件：安装类似Allow CORS: Access-Control-Allow-Origin的插件，临时关闭浏览器的CORS检查，不过这个方法只适合本地开发测试，绝对不能用于生产环境。

最后检查你的代码 #

确认Swagger生成的SpeciesServiceApi的baseURL配置正确，有没有被错误地设置成其他地址，不过从你的代码来看，应该是没问题的，核心还是CORS的问题。

内容的提问来源于stack exchange，提问作者Kristóf Tóth