cropper 图片跨域

上传图片到图片服务器，因为域名不同，多以会有跨域问题。

No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘http://img.xxx.com‘ is therefore not allowed access.

照看代码发现，cropper.js里面对图片的引用路径做了判断，给img标签添加了 crossorigin="anonymous"（匿名跨域属性）。

并且用了XMLHttpRequest 的get请求去访问img的引用路径，这样确实访问不到。需要在图片服务器，或者返回的请求头添加 Access-Control-Allow-Origin:*，或Access-Control-Allow-Origin:请求来源域名。

有一种简单快速的解决办法，就是直接去掉cropper.js里面跨域属性，因为默认情况下图片跨域也是可以显示的。

一、修改如下配置

// Check if the current image is a cross-origin image
checkCrossOrigin: false,

// Check the current image's Exif Orientation information
checkOrientation: false,

二、处理如下代码

下面是原始代码:

 function getCrossOrigin(crossOrigin) {
    return crossOrigin ? ' crossOrigin="' + crossOrigin + '"' : '';
  }

下面是修改后的代码

function getCrossOrigin(crossOrigin) {
    return crossOrigin ? '' : '';
}

img元素中的crossorigin属性

img是我们在web开发中比较常用的一个标签，它代表着文档中的一个图像元素。HTML5给这个标签新增加了一个crossorigin属性，这个属性决定了图片获取过程中是否开启CORS功能

使用场景

在最近的项目开发中，有一个需求是让用户输入一个任意图片的url地址，在前端预览图片并让用户裁剪，再将裁剪好的图片上传到后端的服务器上。这里输入的图片地址很有可能来自第三方站点，这就涉及到一个跨域的问题，如果仅仅是展示预览图片的话是没有什么问题的，但这里裁剪图片时需要将裁剪好的图片进行base64编码，如果没有使用crossorign开启CORS功能的话，在使用canvas的toBlob()、toDataURL()和getImageData()方法时就会出现跨域的问题。

crossorigin属性

这个属性有两个值可选：
anonymous：如果使用这个值的话就会在请求中的header中的带上Origin属性，但请求不会带上cookie和其他的一些认证信息。
use-credentials：这个就同时会在跨域请求中带上cookie和其他的一些认证信息。
在使用这两个值时都需要server端在response的header中带上Access-Control-Allow-Credentials属性。
可以通过server的配置文件来开启这个属性：server开启Access-Control-Allow-Credentials