1、config文件夹下index.js文件设置proxyTable(proxyTable后面的host可以设置也可以保持默认的localhost)
proxyTable: {
'/api': {
target: 'http://10.xx.xx.xx:8080/renter-server', // 开发环境
// target: 'http://10.xx.xx.xx:8080/renter-server', // 生产环境接口
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
},
host: '自己的I
在开发Web应用时，尤其是使用Vue.js和Webpack这样的现代前端框架和构建工具，开发者经常会遇到接口跨域的问题。跨域是浏览器的一种安全机制，限制了JavaScript从不同源获取数据的能力，以防止恶意脚本窃取或操作数据。然而，这在开发过程中可能会造成困扰，因为开发服务器与API服务器通常不在同一个域下。本文将详细讲解如何解决Vue+Webpack项目中接口跨域的问题。
解决跨域问题的关键在于配置Webpack的代理。在Vue项目的`config`文件夹下的`index.js`文件中，你可以找到`proxyTable`配置项。这个配置项允许你将特定的URL路由转发到另一个服务器，从而绕过浏览器的同源策略。例如：
```javascript
proxyTable: {
'/api': {
target: 'http://10.xx.xx.xx:8080/renter-server', // 开发环境
// target: 'http://10.xx.xx.xx:8080/renter-server', // 生产环境接口
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
```
在这里，`/api`是前端应用发起请求的路径前缀，`target`则是实际API服务器的地址。`changeOrigin`设置为`true`表示允许跨域请求，而`pathRewrite`则用于重写URL，使得前端请求 `/api` 相当于向 `http://10.xx.xx.xx:8080/renter-server` 发送请求。
在使用axios等HTTP库进行请求时，你可以将API基础路径设置为`/api`。例如，对于Vue项目中axios的配置：
```javascript
let env = process.env.NODE_ENV;
let BASE_1, BASE_2;
if (env === 'production') {
// 生产环境 正式打包使用
BASE_1 = BASE_2 = CONFIG.apiHost;
} else if (env === 'development') {
// 开发环境 本地测试使用
BASE_1 = BASE_2 = '/api';
}
axios.get(BASE_1 + '/pc/getHouseList', { params: params });
```
如此一来，无论在开发环境还是生产环境，请求都将被正确地转发到相应的API服务器。
然而，仅仅解决接口跨域问题还不够，有时候在项目打包部署后，还可能遇到404错误。这是因为Vue.js项目在打包后，静态资源路径可能不正确。对此，可以调整Webpack的配置。具体来说，你需要修改`build`文件夹下的`webpack.config.js`（或`vue.config.js`，取决于你的Vue版本）中的`assetsPublicPath`配置。将其改为相对路径，如`'./'`，确保资源文件相对于`index.html`加载。
此外，如果在CSS中使用`background-image`时遇到404错误，原因可能是CSS的相对路径计算起点变成了CSS文件本身的位置。为了解决这个问题，你可以在`build/utils.js`文件中添加代码，对CSS资源的路径进行处理，确保它们相对于HTML文件。
解决Vue+Webpack项目接口跨域问题涉及对Webpack的代理配置，以及针对打包后资源路径的调整。通过以上步骤，你应该能够顺利地在开发环境中进行API调用，并在部署时避免404错误。在实际开发中，理解这些原理并灵活运用是提升开发效率的关键。
