vue-cli - Vue2 CLI 5.0.8跨域配置不起作用，求助解决方案？

Question

vue2前端设置跨域一直不生效，一直显示是127.0.0.1。

百度了半天每个代码都试了，就是不行。版本是@vue/cli 5.0.8

Answer 1

在 Vue CLI 项目中，跨域问题通常可以通过在 vue.config.js 文件中配置 devServer 的 proxy 选项来解决。如果你发现跨域配置没有生效，以下是一些可能的解决方案和检查点：

1. 确保存在 vue.config.js 文件：
   如果项目中没有 vue.config.js 文件，你需要创建它。在项目的根目录下创建一个名为 vue.config.js 的新文件。

2. 配置 devServer.proxy：
   在 vue.config.js 文件中，配置 devServer 的 proxy 选项，指向你的后端 API 服务器。例如：

   module.exports = {  devServer: {    proxy: {      '/api': { // 匹配所有以 /api 开头的请求        target: 'http://your-backend-server.com', // 你的后端服务器地址        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置        pathRewrite: {          '^/api': '' // 去除请求中的前缀，使最终的请求符合后端的接口路径        }      }    }  }}

3. 重启开发服务器：
   每次修改 vue.config.js 文件后，都需要重启 Vue CLI 的开发服务器，以使新的配置生效。
4. 检查浏览器控制台和网络请求：
   在浏览器控制台查看是否有错误信息，并通过网络请求检查实际的请求和响应。确保请求被正确地代理到了后端服务器，并且响应状态码表明请求是成功的。
5. 检查后端服务器：
   确认你的后端服务器正确配置并支持 CORS（跨源资源共享）。有时候，问题可能不在于 Vue CLI 的配置，而是后端服务器没有正确响应预检请求（OPTIONS 请求）或没有返回正确的 CORS 头部。
6. 检查版本兼容性：
   确认你使用的 Vue CLI 版本（5.0.8）和其他相关依赖没有已知的跨域配置问题。有时，升级到最新版本可能解决某些兼容性问题。
7. 使用其他方法：
   如果上述方法都不奏效，你可以考虑使用其他工具或库来解决跨域问题，比如使用 CORS 代理服务或浏览器插件。
8. 查看详细错误信息：
   你提供的图片链接没有显示具体的错误信息，这可能会限制解决问题的准确性。如果可能，请提供详细的错误信息或截图，以便更准确地定位问题。

请注意，跨域配置可能会因你的具体环境和需求而有所不同。上述建议是一些通用的解决方案，但具体情况可能需要进一步的调试和配置。