项目中遇到的跨域问题

需求：前端页面中存在一个img和一个vuepdf组件，需要对后台接口返回的两个地址分别进行访问展示。

 两个地址均为测试服务器地址，由接口返回

图片地址：http:106.128.46.200：8080/stage-api/ipg

img的src支持跨域，可以直接访问到图片进行展示

PDF地址：http:106.128.46.200：8080/stage-api/pdf

pdf组件的src不支持跨域，所以本地启动的项目无法请求到数据

报错图片

问题原因

后台给出的地址为固定的测试环境地址，地址中间存在stage-api，前端本地启动的项目为开发环境服务器，地址中间是dev-api，导致域名不一样。

解决问题

需要对后台返回地址数据进行截取stage-api后面的部分，截取地址时候尽量使用地址中固定字符串截取，不要使用/截取，容易出现问题然后利用process.env.VUE_APP_BASE_API区分环境进行拼接，axios请求在前面补加baseurl，

最终地址为http:localhost：8080/dev-api/pdf,请求成功。