为何Axios请求localhost接口出现跨域协议支持错误？

这个错误的核心原因很简单——你的axios请求URL没加HTTP协议前缀！

浏览器看到localhost:8081/fetchData?table=locations时，不会默认把它当成HTTP请求，反而会根据当前页面的协议来解析它。比如如果你的前端页面是通过file://协议打开的（直接双击HTML文件），浏览器就会认为你是从file协议跨域请求到一个非标准协议的地址，自然触发这个跨域限制提示。

快速修复步骤 #

直接给请求URL加上http://前缀就行：

this.Locations = axios.get('http://localhost:8081/fetchData?table=locations').then((res) => { return res })

加上协议后，浏览器能明确识别这是一个标准的HTTP请求，就不会再触发这个协议相关的跨域错误了。

额外提醒 #

既然你说直接在浏览器访问接口正常，说明后端的/fetchData配置是没问题的。如果后续还遇到其他跨域问题（比如请求被OPTIONS拦截），可以考虑在后端app.js里添加CORS中间件（比如Express的cors包）来允许前端所在域名的请求，但当前这个错误的直接触发点就是缺少HTTP协议前缀。

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