Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "Vue dynamic loading pictures cannot be displayed when crossing domains." The small editor shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "Vue dynamic loading pictures cannot be displayed when crossing domains." It can help you solve the problem.

Regular request forwarding

In vue-cli3, edit vue.config.js directly as follows:

let proxyObj={};proxyObj ['/']={ ws:false, target:' http://localhost:8023',//backend address changeOrigin:true, pathRewrite:{ '^/':'' }};module.exports={ devServer:{ host:'localhost', port:8080, proxy:proxyObj }};

Code is very simple, do not explain, this code is to forward all requests to the backend.

Regular src dynamic binding

As follows:

// position.duiduorob is the field defined in data

It is worth noting that you need to use require(``) such a method, if you directly fill in the picture address such as:

浏览器内会找不到该图片。原因：通常在编译运行后，图片会被webpack统一打包到localhost:8080/static/img/[文件名].png，因为是上述过程动态加载的，所以url-loader无法解析图片地址，所以导致上述方法中的图片无法在浏览器内显示。解决方法就是通过require(``)这样的方法将图片作为模块被加载。

跨域请求转发时找不到图片

前面也说了，就是因为转发了全部请求，所以上述require(``)过后，浏览器去后端找图片了，导致找不到。

解决思路：只转发要访问后端接口的请求，其它不变。

所以其实就是过滤一下，添加一个条件。如下：要访问后端的请求在url上加一个/api即可

let proxyObj={};proxyObj['/api']={ //url前部加上'/api' ws:false, target:'http://localhost:8023',//后端地址 changeOrigin:true, pathRewrite:{ '^/api':'' //到了后端去掉/api }};module.exports={ devServer:{ host:'localhost', port:8080, proxy:proxyObj }};

所以在其他部分全部不变的情况下，只需在你封装的http请求方法内给url参数前加一个'/api'前缀，如下：

export const getRequst=(url,params)=>{ return axios({ method:'get', url:'/api'+ url,//原来为 url:url, data:params, })};

这下访问后端的请求全部在url上套上了'/api'，而其它请求也不会被转发到后端了。

知识点补充：vue中解决跨域问题

方法1.后台更改header

header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

方法2.使用JQuery提供的jsonp

methods: { getData () { var self = this $.ajax({ url: 'http://f.apiplus.cn/bj11x5.json', type: 'GET', dataType: 'JSONP', success: function (res) { self.data = res.data.slice(0, 3) self.opencode = res.data[0].opencode.split(',') } }) } }

方法3.使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）

例如请求的url:"http://f.apiplus.cn/bj11x5.json"

1、打开config/index.js,在proxyTable中添写如下代码：

proxyTable: { '/api': { //使用"/api"来代替"http://f.apiplus.c" target: 'http://f.apiplus.cn', //源地址 changeOrigin: true, //改变源 pathRewrite: { '^/api': 'http://f.apiplus.cn' //路径重写 } } }

2、使用axios请求数据时直接使用"/api"：

getData () { axios.get('/api/bj11x5.json', function (res) { console.log(res) })

通过这中方法去解决跨域，打包部署时还按这种方法会出问题。解决方法如下：

let serverUrl = '/api/' //本地调试时 // let serverUrl = 'http://f.apiplus.cn/' //打包部署上线时 export default { dataUrl: serverUrl + 'bj11x5.json' }

附：

方法二引入jq

1.下载依赖

cnpm install jquery --save-dev

2.在webpack.base.conf.js文件中加入

plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ],

3.在需要的temple里引入也可以在main.js里全局引入

import $ from 'jquery'

eg：

source{{data}} import $ from 'jquery' export default({ name:"source", data(){ return{ data:"" } }, created(){ this.getData() }, methods:{ getData () { var self = this $.ajax({ url: '你要请求的url', type: 'GET', dataType: 'JSONP', success: function (res) { self.data = res.result } }) } } })关于"Vue动态加载图片在跨域时无法显示怎么解决"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.