vue项目中,前端使用axios与后台进行数据请求或者提交的时候,如果后台没有设置跨域,浏览器做数据请求的时候就会报“No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” 这种跨域错误。
虽然让后台做简单的配置即可解决,但是求人的事还是少做的好,如果前端能自己解决,也当作自己的经验积累了。
言归正传,直接上代码:
1.在config文件夹下找到index.js,在dev:{}中找到 proxyTable: {},增加代码块如下:
proxyTable: {
"/api":{
target: 'http://45.79.75.100:8889',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
},
2.在你自己工程下的地方,找到请求接口(我原本的请求接口为
http://45.79.75.100:8889/book/api/news/list?version=1.0&pageSize=10&pageNo=1
修改后就变成了
http://45.79.75.100:8889/api/book/api/news/list?version=1.0&pageSize=10&pageNo=1
)
在此以get请求为例,
axios.get("/api/book/api/news/list?version=1.0&pageSize=10&pageNo=1")....
3.将工程重新保存,在powershell 中ctrl + c终止工程,重新npm run dev,你就会看到
请求连接是真实有效的,方便大家测试,非诚勿扰。
以上个人成功的案例仅供参考,不懂要悟。