说明:
1. vue2可通过vue.config.js进行跨域配置,如下
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
open: true,
client: {
overlay: false,
},
proxy: {
'/base': { // 代码中使用:/base/a/b(/base就是target对应的地址)
target: '需要访问的域名',
changeOrigin: true, // 允许跨域请求
pathRewrite: { // 重写路径,替换请求地址中的指定路径
'^/base': '' // 这里会将/base替换为空
}
}
}
}
})
2. 按照上面这样配置,可以在本地可以正常运行,一旦打包部署到服务器后,访问代理的服务器,就会报错404,原因是,vue打包不会将配置的代理vue.config.js配置相关内容一起打包,所以导致打包部署后调用非同源接口报错404,解决方案:可以通过后端服务器,配置nginx代理来做跨域处理(修改\conf\nginx.conf文件:在http块中新建一个server块,具体内容如下,改完后记得重启nginx)如下:
server {
listen 8090; # 前端运行的端口号
server_name 0.0.0.0; # 全域广播
autoindex on; # 开启跨域
index index.html index.htm index.php;
root D:\WebstormProject\打包\dist; # 前端打包文件存储的位置
location ^~/api/ { # 这里是把url中的api进行替换
proxy_pass http://localhost:8080/; # 后端url
}
client_max_body_size 50m; # 上传文件大小限制
}