应用场景
开发过程中,前台跟后台需要进行数据交互,由于浏览器安全机制,直接使用axios会产生跨域问题,访问不到后台数据,因此我们需要配置代理。
解决方案
代理解决跨域的解释:
客户端直接请求服务端的数据会存在跨域问题,但是服务器和服务器之间可以直接请求数据,并没有跨域的问题(在服务器没有设置禁止跨域权限的情况下)。
所以,我们可以配置一个代理服务器请求另一个服务器中的数据,然后把请求出来的数据返回到我们的代理服务器中,代理服务器再把数据返回到我们的客户端,这样做就可以跨域访问后台的数据。
代理配置
步骤一:在config/index.js里面修改 module
模块。
var baseUrl = 'http://10.1.3.34:8060'
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
//跨域请求配置
proxyTable: {
'/api': {
target: baseUrl,
changeOrigin: true,//是否跨域 开启代理:在本地创建一个虚拟服务器
ws: true,//是否代理websockets
secure: false,//如果是https接口,需要配置这个参数
pathRewrite: {'^/api': '/'} //重写路径
}
},
// Various Dev Server settings
host: '10.1.3.8', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
},
步骤二:在 main.js
修改配置。
/** global config */
axios.defaults.baseURL = '/api' //作用是在每次发送的请求路径中都会带一个/api的前缀。
步骤三:在使用axios发送请求的时候,写相对路径
axios.get("/zlhj_interface/completeScreen/queryResult").then((res) => {
console.log(res.data.data)
}).catch((error) => {
console.log(error)
})
恭喜你!到此为止你的跨域配置已完成!
// An highlighted block
或许,你有自己封装的axios文件request.js
,那么你需要这样修改。
/** global config */
request.defaults.baseURL = process.env.API_HOST;
如果你像这样修改了,那么你还需要进行以下的配置:
1.在 dev.env.js
修改配置。
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST:'"/api/"'
})
2.在 prod.env.js
修改配置。
module.exports = {
NODE_ENV: '"production"',
API_HOST:'"http://192.168.88.62:8080"'
}
3.在 api.js
中封装好方法,到时候在需要用到的时候引入改方法并直接使用。
export function checkCarModel(Vin) {
return request({
method: 'post',
url:'/zlhj_interface/carinfo/queryCarModel',
data:{vin:Vin}
})
}
4.在 vue
引入改方法并直接使用。
import { checkCarModel } from "../../request/api";
checkCarModel(Vin).then(res => {
console.log("res.data.data",res.data.data);
})
恭喜你!请求成功!