Like when our local vue project is running, the access address is generally localhost. At this time, the port number is inconsistent when requesting the background interface. There will definitely be cross-domain problems, so if we want to access the interface normally, we need to solve the cross-domain problem. domain problem.
In this article, we configure the proxy agent in vue.config.js to solve the crossing: if there is no vue.config.js, just build one directly in the project root directory.
const path = require('path')
const resolve = (dir) => path.join(__dirname, dir)
module.exports = {
publicPath: './', // 打包路径，使用相对路径生成的dist文件夹下的index可以打开
outputDir: 'dist', // 输出文件目录
productionSourceMap: false, // 取消生成map文件
lintOnSave: false, // 配置关闭eslint (代码会有红色热浪提示错 但不影响代码运行)
// webpack-dev-server 相关配置
devServer: {
open: true, // 自动打开浏览器
host: '0.0.0.0',
/* 设置为0.0.0.0则所有的地址均能访问 */
port: 8080, // 端口号
https: false, // 是否使用https协议
hotOnly: false, // 是否开启热更新
// proxy: null // 设置代理
disableHostCheck: true, // 开启可以用自己的域名
//【【【【【【【【【【【【【【【【【【【【【注意修改和配置代理后，一定要重启项目 否则无效或404】】】】】】】】】】】】】】】】】
//【【【【【【【【【【【【【【【【【【【【【注意修改和配置代理后，一定要重启项目 否则无效或404】】】】】】】】】】】】】】】】】
proxy: {
//【【【【【【【【【【【【【【【 注意修改和配置代理后，一定要重启项目 否则无效或404】】】】】】】】】】】】】】】】】
// 配置多个代理
'/chc-shop': {
target: 'https://www.bilibili.cn', //这里的是.cn还是.com 只会影响你本地启动项目时候会调用哪个数据库的数据，而不会影响测试和线上环境调用对应的接口的。（一般都是本地调用.cn；等本地需要调试线上bug时候，改成.com重启项目看线上bug）
changeOrigin: true, //是否跨域
secure: false, //如果是https请求 需要设置为true
logLevel: 'debug',
//ws: true,//是否要代理 websocket
},
// 此处若使用 "/api1" 类似命名可能会导致请求时只截取api部分接口出现404错误，因此命名时尽量避免此类命名方式。
// 既命名不要相似 有/api 就不要再出现/api2
'/myapi': {
target: 'https://www.bilibili.cn', //接口域名
changeOrigin: true, //是否跨域
secure: false, //如果是https请求 需要设置为true
logLevel: 'debug',
//ws: true,//是否要代理 websocket
pathRewrite: {
// 路径重写--意思就是遇到路径有 /myapi 的，就重写成 / 了。具体是重新写成 / 还是 /myapi看你自己的路径。
'^/myapi': '/' //（如果你的路径没有公共部分 那代理就这么写 vue页面请求的地址前需要自己拼接上 /myapi/后端接口 ）
// '^/myapi': '/myapi' //（好比你的很多路径都是有公共部分 例如 /myapi/xx/xxx类型的，那代理就需要这么写或者直接不写pathRewrite这部分）
}
},
},
},
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('common', resolve('src/common'))
.set('utils', resolve('src/utils'))
}
}
1. Key points for attention:
1. After configuring the proxy agent, after modifying the content: must restart the project, must restart the project, must restart the project, must restart the project, must restart the project , otherwise it will be invalid or error 404 will be reported. Also, do not appear '/api' and '/ api2' is similar, so only one will take effect! ! !
2.proxy can configure multiple proxies.
2.1 For example: Many of my interfaces are /chc-shop/a1/xxx /chc-shop/a2/xxx, that is, there is a public part /chc-shop. Then it can be configured as the following proxy
//【【【【【【【【【【【【【【【 注意修改和配置代理后，一定要重启项目 否则无效或404】】】】】】】】】】】】】】】】】
proxy: {
// 配置公共代理
'/chc-shop': {
target: 'https://www.zhbbroker.cn', //这里的是.cn还是.com 只会影响你本地启动项目时候会调用哪个数据库的数据，而不会影响测试和线上环境调用对应的接口的。（一般都是本地调用.cn；等本地需要调试线上bug时候，改成.com重启项目看线上bug）
changeOrigin: true, //是否跨域
secure: false, //如果是https请求 需要设置为true
logLevel: 'debug',
//ws: true,//是否要代理 websocket
},
},
At the same time, the request address of the vue page is like this:
2.2 For example: if the interface has no public part, then you need to write pathRewrite, and at the same time rewrite the proxy address to '/';
pathRewrite means path rewriting. It means that if the path has /myapi, it will be rewritten as /. Specifically, whether to rewrite / or /myapi depends on your own path.
For example, the request address of the backend is /php2/mobile/login_verify_code.php, then I need to write a separate /php2 to proxy,
目标地址为：https://www.bilibili.com/php2/mobile/login_verify_code.php
代码中请求的地址为: /php2/mobile/login_verify_code.php
本地发送请求的地址为：http://localhost:8080/php2/mobile/login_verify_code.php
线上被proxy替换为实际请求地址: https://www.bilibili.com/php2/mobile/login_verify_code.php
//【【【【【【【【【【【【【【【 注意修改和配置代理后，一定要重启项目 否则无效或404】】】】】】】】】】】】】】】】】
proxy: {
'/php2': {
target: 'https://www.zhbbroker.cn', //接口域名
changeOrigin: true, //是否跨域
secure: false, //如果是https请求 需要设置为true
logLevel: 'debug',
//ws: true,//是否要代理 websocket
},
},
At the same time, vue requests the page
3. Summary:
To configure the agent, you must restart the project, otherwise it will be invalid or whether 404
is written to pathRewrite, it depends on whether the interface given by the backend has a public url part, if there is, you can not write it; if not, configure a /myapi splicing by yourself On the backend url, also rewrite pathRewrite to /