AJAX请求出现No 'Access-Control-Allow-Origin'错误，求代码解决方案

先给你说清楚：你没法直接在前端JS代码里加Access-Control-Allow-Origin头部，这个是得被请求的服务器（也就是speechgen.io）返回的，用来允许跨域请求。前端强行加这个头没用，浏览器不认，因为CORS规则是浏览器检查服务器返回的响应头来判断是否允许跨域。

给你几个能在代码里落地的解决办法：

1. 搭个后端代理服务器 #

你需要弄个简单的后端服务当中间层用。前端请求自己的后端，后端再去请求speechgen.io，最后把结果返给前端。这样就绕开跨域限制了，因为后端请求不受浏览器的CORS规则管。

给你个Node.js（Express框架）的代理示例：

// 后端代理代码（Node.js + Express）
const express = require('express');
const axios = require('axios');
const app = express();

app.use(express.json());

app.post('/api/proxy-speech', async (req, res) => {
  try {
    const apiUrl = "https://speechgen.io/index.php?r=api/text";
    const response = await axios.post(apiUrl, req.body, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded' // 和原请求的Content-Type保持一致
      }
    });
    res.send(response.data);
  } catch (error) {
    res.status(error.response?.status || 500).send(error.message);
  }
});

app.listen(3000, () => {
  console.log('代理服务器跑在http://localhost:3000');
});

然后改你的前端代码，请求这个代理接口就行：

function sound1() {
  const proxyUrl = "http://localhost:3000/api/proxy-speech";
  const data = { 
    token: "key", 
    email: "email", 
    voice: "voice", 
    text: "text" 
  };
  $.ajax({
    url: proxyUrl,
    method: "POST",
    data: data,
    success: function(response) {
      console.log(response);
    },
    error: function(xhr, textStatus, errorThrown) {
      console.log("Error:", errorThrown);
    }
  });
}

2. 查下API支持JSONP不（仅限GET请求） #

注意：你现在用的是POST请求，JSONP只支持GET，所以这个方法可能用不了，但可以去看API文档确认下。要是支持的话，就把请求改成GET，用jQuery的$.getJSON加回调参数就行。

3. 确认API有没有CORS配置项 #

有些API会让你在控制台配置允许的域名，或者在申请API密钥的时候设置跨域相关的权限。你可以去speechgen.io的API文档里看看，有没有地方能把你的前端域名加到允许列表里。

内容的提问来源于stack exchange，提问作者VRZ Nathan