VueCli生产环境跨域配置与解决方法

"Vue CLI在生产环境中遇到跨域问题的解决方案" 在开发Web应用时，Vue CLI是一个非常方便的工具，它提供了快速搭建项目结构、自动化构建和优化等功能。然而，在开发环境中，由于浏览器的同源策略限制，我们通常会使用Vue CLI的`proxyTable`配置来解决跨域问题。但在生产环境中，这种方法不再适用，因为`proxyTable`仅在开发服务器（DevServer）上生效，不会被包含在打包后的静态资源中。 在描述中提到的配置段展示了如何设置`proxyTable`来代理API请求。`target`字段指定了目标服务器的URL，`changeOrigin`设为`true`意味着在请求头中添加`Access-Control-Allow-Origin`，以便允许跨域请求。`pathRewrite`用于重写请求路径，如果接口URL没有特定前缀如`/api`，则可以去掉这个前缀。 当项目被打包并部署到生产服务器后，原先的`proxyTable`配置不再起作用，因此会出现404错误和跨域问题。为了解决这个问题，我们需要在项目的环境配置文件中进行调整。 Vue CLI项目通常有两个环境配置文件：`dev.env.js`（开发环境）和`prod.env.js`（生产环境）。在`dev.env.js`中，我们将`VUE_APP_BASE_API`设置为`"/api"`，这意味着在开发环境中，axios等库将通过`/api`前缀来发送请求。而在`prod.env.js`中，我们应该将`VUE_APP_BASE_API`设置为实际的生产环境API地址，例如`"http://192.168.xx:xxx"`。 为了在代码中方便地使用这些环境变量，我们可以使用`process.env.VUE_APP_BASE_API`来获取API的基础URL。然而，每次在API请求中手动拼接基础URL会变得繁琐。为了避免这种情况，我们可以配置axios的`baseURL`属性，这样所有axios发起的请求都会自动加上这个前缀。 例如，我们可以在main.js文件中全局设置axios的`baseURL`： ```javascript import axios from 'axios'; axios.defaults.baseURL = process.env.VUE_APP_BASE_API; ``` 这样，无论是在开发还是生产环境，axios的请求都将自动带上正确的基础URL，从而解决跨域问题。 总结一下，解决Vue CLI在生产环境打包部署后的跨域问题，主要步骤包括： 1. 在`prod.env.js`中设置正确的生产环境API地址。 2. 使用`process.env.VUE_APP_BASE_API`作为axios请求的基础URL。 确保在配置文件中使用双引号包裹字符串，以避免语法错误。完成这些步骤后，即使在生产环境中，你的Vue应用也能正确处理API请求，避免跨域问题。