oss图片跨域问题_图片存储解决方案-阿里云对象存储

开通对象存储OSS

1. 打开阿里云官网，选择产品对象存储 OSS

2.开通对象存储OSS

需要支付宝扫码登录

3.进入管理控制台

4.新建存储空间

5.跨域资源共享(CORS)的设置

管理文件

整合Springboot实现图片上传

服务端签名直传并设置上传回调 : 在服务端完成签名，并且设置上传回调，然后通过表单直传数据到OSS

更多详细文档参照：

https://help.aliyun.com/document_detail/31927.html?spm=a2c4g.11186623.6.1525.70f77eaeNZGCTb

一、流程介绍

流程如下：

1. 用户向应用服务器请求上传的Policy和回调。

2. 应用服务器返回上传Policy和回调设置。

3. 用户直接向OSS发送文件上传请求。

4. OSS根据用户的回调设置，发送回调请求给应用服务器。

5. 应用服务器返回响应给OSS。

6.OSS将应用服务器返回的内容返回给用户

二、体验测试

服务器端源码 ： aliyun-oss-appserver-java-master

客户端源码： aliyun-oss-appserver-js-master

在服务器端找到并打开源码文件CallbackServer.java，修改如下的代码片段：

String accessId = "";      // 请填写您的AccessKeyId。String accessKey = ""; // 请填写您的AccessKeySecret。String endpoint = "oss-cn-hangzhou.aliyuncs.com"; // 请填写您的 endpoint。String bucket = "bucket-name";                    // 请填写您的 bucketname 。String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint// callbackUrl为上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。String callbackUrl = "http://88.88.88.88:8888";String dir = "user-dir-prefix/"; // 用户上传文件时指定的前缀

在客户端打开upload.js文件，找到下面的代码语句：

// serverUrl是 用户获取 '签名和Policy' 等信息的应用服务器的URL，请将下面的IP和Port配置为您自己的真实信息。serverUrl = 'http://88.88.88.88:8888'

将severUrl改成应用服务器的地址，客户端可以通过它获取签名直传Policy等信息

三、流程解析

3.1 用户向应用服务器请求上传Policy和回调。

在客户端源码中的upload.js文件中，如下代码片段的变量serverUrl的值可以用来设置应用服务器的URL。设置好之后，客户端会向该serverUrl发送GET请求来获取需要的信息。

3.2 应用服务器返回上传Policy和回调设置代码。

应用服务器侧的签名直传服务会处理客户端发过来的GET请求消息，您可以设置对应的代码让应用服务器能够给客户端返回正确的消息。

{"accessid":"6MKO******4AUk44","host":"http://post-test.oss-cn-hangzhou.aliyuncs.com","policy":"eyJleHBpcmF0aW9uIjoiMjAxNS0xMS0wNVQyMDo1Mjoy******Jjdb25kaXRpb25zIjpbWyJjdb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MDAwXSxbInN0YXJ0cy13aXRoIiwiJGtleSIsInVzZXItZGlyXC8iXV19","signature":"VsxOcOudx******z93CLaXPz+4s=","expire":1446727949,"callback":"eyJjYWxsYmFja1VybCI6Imh0dHA6Ly9vc3MtZGVtby5hbGl5dW5jcy5jdb206MjM0NTAiLCJjYWxsYmFja0hvc3QiOiJvc3MtZGVtby5hbGl5dW5jcy5jdb20iLCJjYWxsYmFja0JvZHkiOiJmaWxlbmFtZT0ke29iamVjdH0mc2l6ZT0ke3NpemV9Jm1pbWVUeXBlPSR7bWltZVR5cGV9JmhlaWdodD0ke2ltYWdlSW5mby5oZWlnaHR9JndpZHRoPSR7aW1hZ2VJdbmZvLndpZHRofSIsImNhbGxiYWNrQm9keVR5cGUiOiJhcHBsaWNhdGlvbi94LXd3dy1mb3JtLXVybGVuY29kZWQifQ==","dir":"user-dirs/"}

上述示例的callback内容采用的是base64编码。经过base64解码后的内容如下：

{"callbackUrl":"http://oss-demo.aliyuncs.com:23450","callbackHost":"oss-demo.aliyuncs.com","callbackBody":"filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}","callbackBodyType":"application/x-www-form-urlencoded"}

3.3 用户直接向OSS发送文件上传请求

3.4 OSS根据用户的回调设置，发送回调请求给应用服务器

客户端上传文件到OSS结束后，OSS解析客户端的上传回调设置，发送POST回调请求给应用服务器。

3.5 应用服务器返回响应给OSS。

应用服务器根据OSS发送消息中的authorization来进行验证，如果验证通过，则向OSS返回如下json格式的成功消息。

String value: OK

Key: Status

3.6 OSS将应用服务器返回的消息返回给用户。

四、代码实现上传步骤

1. 在pom.xml中添加相关依赖

com.aliyun.oss    aliyun-sdk-oss    2.5.0

2.修改application.yml文件，添加OSS相关配置

# OSS相关配置信息aliyun:  oss:    endpoint: oss-cn-beijing.aliyuncs.com # oss对外服务的访问域名    accessKeyId: 该值需要保密，修改成自己的即可 # 访问身份验证中用到用户标识    accessKeySecret: 该值需要保密，修改成自己的即可 # 用户用于加密签名字符串和oss用来验证签名字符串的密钥    bucketName: macro-oss10001 # oss的存储空间    policy:      expire: 300 # 签名有效期(S)    maxSize: 10 # 上传文件大小(M)    callback: http://cv4bwb.natappfree.cc/aliyun/oss/callback # 文件上传成功后的回调地址    dir:      prefix: mall/images/ # 上传文件夹路径前缀

3.OSS的相关Java配置类 - OSS的连接客户端OSSClient

@Configurationpublic class OssConfig {    @Value("${aliyun.oss.accessKeyId}")    private String ALIYUN_OSS_ACCESSKEYID;    @Value("${aliyun.oss.accessKeySecret}")    private String ALIYUN_OSS_ACCESSKEYSECRET;    @Value("${aliyun.oss.endpoint}")    private String ALIYUN_OSS_ENDPOINT;    @Bean    public OSSClient ossClient(){        return new OSSClient(ALIYUN_OSS_ENDPOINT,ALIYUN_OSS_ACCESSKEYID,ALIYUN_OSS_ACCESSKEYSECRET);    }}

4.添加OSS上传策略封装对象OssPolicyResult

public class OssPolicyResult {    /**     * 访问oss服务身份验证的用户标识     * */    private String accessKeyId;    /**     * 用于验证请求的合法性，包含两部分内容     * 1.Expiration项指定了policy的过期时间     * 2.Conditions是一个列表，可以用于指定Post请求的表单域的合法值     * 如：上传文件的最小和最大允许大小     * 上传文件的文件名称     * (经过UTF-8和base64编码的字符串)     * */    private String policy;    /**     * 对policy签名后的字符串     * */    private String signature;    /**     * 上传文件目录的前缀     * */    private String dir;    /**     * oss对外服务访问的域名     * */    private String host;    /**     * 上传成功后的回调设置     * */    private String callback;

5.添加OSS上传成功后的回调参数对象OssCallbackParam

public class OssCallbackParam {    private String callbackUrl;//请求的回调地址    private String callbackBody;//回调时传入request中的参数    private String callbackBodyType;//回调时传入参数的格式，比如表单提交形式

6.OSS上传成功后的回调结果对象OssCallbackResult

public class OssCallbackResult {    private String filename;//文件名称    private String mimeType;//文件mimetype    private String size;//文件大小    private String height;//图片的高    private String width;//图片的宽

7.添加OSS业务接口OssService

public interface OssService {    /**     * oss上传策略生成     * */    OssPolicyResult policy();    /**     * 上传成功回调     * */    OssCallbackResult callBack(HttpServletRequest request);}

8.添加OSS业务接口OssService的实现类OssServiceImpl

@Servicepublic class OssServiceImpl implements OssService{    @Value("${aliyun.oss.policy.expire}")    private long ALIYUN_OSS_EXPIRE;    @Value("${aliyun.oss.maxSize}")    private Integer ALIYUN_OSS_MAXSIZE;    @Value("${aliyun.oss.dir.prefix}")    private String ALIYUN_OSS_DIR_PREFIX;    @Value("${aliyun.oss.accessKeyId}")    private String ALIYUN_OSS_ACCESSKEYID;    @Value("${aliyun.oss.endpoint}")    private String ALIYUN_OSS_ENDPOINT;    @Value("${aliyun.oss.bucketName}")    private String ALIYUN_OSS_BUCKETNAME;    @Value("${aliyun.oss.callback}")    private String ALIYUN_OSS_CALLBACK;    @Autowired    private OSSClient ossClient;    @Override    public OssPolicyResult policy() {        OssPolicyResult result = new OssPolicyResult();        long expireEndTime = System.currentTimeMillis()+ALIYUN_OSS_EXPIRE*1000;        Date expireDate = new Date(expireEndTime);        SimpleDateFormat sf = new SimpleDateFormat("yyyyMMdd");        String format = sf.format(new Date());        String dir = ALIYUN_OSS_DIR_PREFIX+format+"/";        try {            PolicyConditions policyConditions = new PolicyConditions();            policyConditions.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE,0,ALIYUN_OSS_MAXSIZE*1024*1024);            policyConditions.addConditionItem(MatchMode.StartWith,PolicyConditions.COND_KEY,dir);            String postPolicy = ossClient.generatePostPolicy(expireDate, policyConditions);            System.out.println("=========>postPolicy:"+postPolicy);            byte[] binaryData = postPolicy.getBytes("utf-8");            String encodedPolicy = BinaryUtil.toBase64String(binaryData);            String postSignature = ossClient.calculatePostSignature(postPolicy);            OssCallbackParam ossCallbackParam = new OssCallbackParam();            ossCallbackParam.setCallbackUrl(ALIYUN_OSS_CALLBACK);            ossCallbackParam.setCallbackBody("filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}");            ossCallbackParam.setCallbackBodyType("application/x-www-form-urlencoded");            String callback = BinaryUtil.toBase64String(JSON.toJSONString(ossCallbackParam).getBytes("utf-8")) ;            result.setAccessKeyId(ALIYUN_OSS_ACCESSKEYID);            result.setPolicy(encodedPolicy);            result.setDir(dir);            result.setHost("http://"+ALIYUN_OSS_BUCKETNAME+"."+ALIYUN_OSS_ENDPOINT);            result.setSignature(postSignature);            result.setCallback(callback);            System.out.println(JSON.toJSONString(result));        } catch (UnsupportedEncodingException e) {            e.printStackTrace();        }        return result;    }    @Override    public OssCallbackResult callBack(HttpServletRequest request) {        OssCallbackResult result = new OssCallbackResult();        String filename = request.getParameter("filename");        filename = "http://".concat(ALIYUN_OSS_BUCKETNAME).concat(".").concat(ALIYUN_OSS_ENDPOINT)                .concat("/").concat(filename);        result.setFilename(filename);        result.setHeight(request.getParameter("height"));        result.setWidth(request.getParameter("width"));        result.setMimeType(request.getParameter("mimeType"));        result.setSize(request.getParameter("size"));        return result;    }}

9. 添加OssController定义接口

@Controller@RequestMapping("/aliyun/oss")public class OssController {    @Autowired    private OssServiceImpl ossService;    @RequestMapping(value = "/policy", method = RequestMethod.GET)    @ResponseBody    @CrossOrigin   //解决跨域问题    public OssPolicyResult policy() {        OssPolicyResult result = ossService.policy();        return result;    }    @RequestMapping(value = "/callback", method = RequestMethod.POST)    @ResponseBody    @CrossOrigin    public OssCallbackResult callback(HttpServletRequest request) {        OssCallbackResult ossCallbackResult = ossService.callBack(request);        return ossCallbackResult;    }}

10.访问项目测试即可