跨域图片加载问题

不是放暑假了吗，大四要开始找工作，现在在学习。

前几天，简单练习一下js，vue的使用，写了一个获取豆瓣图片的静态网页。

写出来之后，放到了GithubPage，自己试试挺好的。

<div id="myapp" class="center-block">
			<!--{{ srcid[1] }}-->

			<div v-html="rawHtml+srcid[index]+two"></div>

			<div class="btngroup ">
				<button class="btn btn-primary " type="button " v-on:click="last" value="上一张 " >上一张</button>
				<button class="btn btn-primary " type="button " v-on:click="next" value="下一张 " >下一张</button>

			</div>
		</div>

var app = new Vue({
						el: '#myapp',
						data: {
							id: '254354656',
							index: 1,
							rawHtml: '<img src="http://img3.doubanio.com/view/photo/photo/public/p',
							two: '.webp"/>',
							srcid: ["2165829219", "2165211588", "991380314", "991379352", "991377833", "991365384", "991364581", "763118511", "2179356787", "2178253951", "2172318533", "2171815401", "2165211588"]
						},
						methods: {
							last: function(event) {
								this.index=(this.index+13+1)%13;
									},
							next: function(event) {
								this.index=(this.index+13-1)%13;
								
							}
						}
						})

可是在手机，和pad上一访问，发现图片显示不了，而且按钮一点就变成输入。

恩，需要更改

我就在想是不是手机不支持vue。（不会，不支持的话，点击按钮页面不会刷新）

为什么pc可以，手机跟pad不可以。

我就猜是不是pc浏览器上有缓存，我把缓存清理，好了，pc也看不到了，我的代码有问题，img标签改了图片不会改。

我想到了一种方法：ajax获取之后，缓存到后台，然后img标签更改，然后图片就会更改。就像我之前的pc一样。

Req.open("GET",url,false);
Req.send(null);

我把拼接好的字符串传到xmlhttprequest里，访问，问题出现了，浏览器报错，百度翻译之后，JavaScript禁止异域访问！百度了

，都说要加头部或者jsopn。

• 加头部：加了还是不允许
• jsonp 我这个根本不是json或者文本啊，但是我也还是试了试，果然报错，说我是webp图片不是文本

我翻开了我的JavaScript高级设计教程第三版，恩，ajax实现通过js，ajax也默认禁止跨域访问，跨域访问，我的浏览器chrome不用

加头部默认是支持的，传入绝对url就可以了P584，试了试没用但是多了一条错403，说明request发出去了！！但是报了一个4开头的错

，资源不可用。

呆了一会，翻了一页书，我勒个去，图片默认就可以直接通过img对象访问，还可以跨域啊。

改了改。

var img=new Image();
img.src=url;

get，一点错都没报，可是图片不显示，打开控制台没问题，打开network分析了一下请求，发现webp这个请求403了，打开这个request

发现服务器报了403。可是直接访问一下webp链接没问题，正常显示。

同样是浏览器发出的请求为什么一个403一个200！！！

我仔细对比了request,上边这个是页面请求，下边是直接输入地址栏的请求。

上图本来没有cookie

是cookie的问题？？给页面加了头，设置了cookie

<meta http-equiv="cookie" content="bid=WIjdBsSLbuk">

还是不行，页面访问多了个refer，refer设置为null试试

<meta http-equiv="referer" content="null">

报错，说refer不能改变。

查了查refer这个东西，！！！！refer默认不可改变。

JavaScript改变不了refer。

豆瓣通过判断refer，把我的请求当做盗链处理了，就像以前qq空间首页的图片链接一样。

完蛋，网上有一种解决思路，说找一个搜索引擎跳转，一般网站不会把来自搜索引擎的请求当盗链。无果。

走正常途径API试试？？查了查豆瓣api调用方式，恩，需要key，行，我去申请key，发现关闭了，豆瓣把外部API接口关了，，！！不做了不做了

不做了不做了以后用自己的服务器存图片，不浪费您豆宝贵的带宽了