配置请求头后仍出现CORS错误，axios跨域请求失败该如何解决？

Access to XMLHttpRequest at 'https://services.3xsoftware.co.uk/Search/ByPostcode/' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

• 对CORS规则理解错误：Access-Control-Allow-Origin是响应头，必须由被请求的服务端在返回响应时携带，由浏览器校验是否允许跨域访问。你在客户端请求头中添加该字段完全无效，反而可能触发额外的预检请求，甚至被服务器判定为非法请求头直接拒绝。
• axios调用传参格式错误：axios.get()方法的第二个参数直接是配置对象，你多传了一个空字符串""作为第二个参数，导致后续的配置对象没有被正确读取，你写的请求头、responseType配置都完全未生效。

方案1（可控制目标服务端时使用） #

直接在https://services.3xsoftware.co.uk的服务端配置中，给响应头添加Access-Control-Allow-Origin: http://localhost即可，生产环境建议不要用*通配符，指定具体可信源安全性更高。

方案2（不可控制目标服务端、开发阶段使用） #

用本地代理转发请求：可以直接用前端构建工具自带的代理能力（比如webpack的devServer.proxy、vite的server.proxy），也可以自行本地启动一个node代理服务，由服务端转发请求到目标接口再将结果返回给前端，服务端之间的请求不受浏览器同源策略限制，不会触发CORS报错。

方案3（仅临时调试使用） #

可以使用浏览器CORS禁用插件，或者给浏览器添加--disable-web-security启动参数关闭同源策略，该方案仅可用于本地测试，绝对不能用于生产环境。

axios.get('https://services.3xsoftware.co.uk/Search/ByPostcode/' + postcode,
    {
        responseType: "json",
    }
)

内容的提问来源于stack exchange，提问作者Nazmul Hossain Nihal