vue 跨域代理，对象存储（阿里云、aws）预签名上传文件

一、安装axoios

       ①、全局安装axois

#全局安装axios

PS E:\Code\Vues\sha_web\sha_web> npm install axios --g

 

二、配置跨域代理

        ①、配置跨域代理

 proxyTable: {
      "/sqray-keyan": { //请求地址关键字【只代理含关键字地址】
        target: "http://192.168.10.100:8082",//后端接口地址【target地址将替换当前应用（网站）地址，下文aws请求（http://localhost:8080）地址】
        changeOrigin: true //启用代理跨域
      }
    },

       ②、具体截图

  

三、预签名上传文件

        ①、阿里云

1、阿里云无需如上跨域设置，可通过控制台具体设置。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <input type="file"
           id="file"
           @change="handlerChangeFile" />
    <router-view />
  </div>
</template>

<script>
import request from "axios";

export default {
  name: 'App',
  mounted: () => {

  },
  methods: {

    //文件切换事件
    handlerChangeFile: (ev) => {

      //已选文件
      const file = ev.target.files[0];

      const preSignalURL = "https://apricot.oss-cn-shenzhen.aliyuncs.com/apricot.jpg?Expires=1667621086&OSSAccessKeyId=LTAI5tE49rrKU9iAxwDdzMcD&Signature=qQlzyknGZrD47HGit00LOiXip4k%3D";

      let reader = new FileReader();

      //加载文件流
      reader.onload = (buf) => {
        debugger
        // xhr.send(buf.target.result)
        request.head()
        request.put(preSignalURL)
          .then(res => {
            console.log("complete");
          });
      };

      //读取文件流
      reader.readAsArrayBuffer(file);
    }
  }
}
</script>

2、使用XMLHttpRequest 请求方式 

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <input type="file"
           id="file"
           @change="handlerChangeFile" />
    <router-view />
  </div>
</template>

<script>
import request from "axios";

export default {
  name: 'App',
  mounted: () => {

  },
  methods: {

    //文件切换事件
    handlerChangeFile: (ev) => {

      //已选文件
      const file = ev.target.files[0];

      const preSignalURL = "https://apricot.oss-cn-shenzhen.aliyuncs.com/apricot.jpg?Expires=1667628334&OSSAccessKeyId=LTAI5tE49rrKU9iAxwDdzMcD&Signature=0YAmXGPJJJenpsPHVB6lZUyI2tU%3D";

      let reader = new FileReader();

      var xhr = new XMLHttpRequest();

     //设置请求【请求头按需添加】
      xhr.open("put", preSignalURL);
      // xhr.setRequestHeader("Content-Type", "application/octet-stream")

      //加载文件流
      reader.onload = (buf) => {

        //发送请求
        xhr.send(buf.target.result)

      };

      //读取文件流
      reader.readAsArrayBuffer(file);
    }
  }
}
</script>

       ②、Aws

1、文章环境对象存储存在跨域，需设置跨域，具体环境具体设置。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <input type="file"
           id="file"
           @change="handlerChangeFile" />
    <router-view />
  </div>
</template>

<script>
import request from "axios";

export default {
  name: 'App',
  mounted: () => {

  },
  methods: {

    //文件切换事件
    handlerChangeFile: (ev) => {

      //已选文件
      const file = ev.target.files[0];

      const preSignalURL = "http://localhost:8080/sqray-keyan/apricot.jpg?AWSAccessKeyId=HYIHVY9WF5S553G80J82&Expires=1667619377&Signature=tBfNeSYyfXH5%2FimChC5hIlASaeA%3D";

      let reader = new FileReader();

      //加载文件流
      reader.onload = (buf) => {
        // xhr.send(buf.target.result)
        request.head()
        request.put(preSignalURL
          , buf.target.result
          , {
            headers: {
              "Content-Type": "application/octet-stream"
            }
          })
          .then(res => {
            console.log("complete");
          });
      };

      //读取文件流
      reader.readAsArrayBuffer(file);
    }
  }
}
</script>

 2、使用XMLHttpRequest 请求方式 【有效跨域代理】

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <input type="file"
           id="file"
           @change="handlerChangeFile" />
    <router-view />
  </div>
</template>

<script>
import request from "axios";

export default {
  name: 'App',
  mounted: () => {

  },
  methods: {

    //文件切换事件
    handlerChangeFile: (ev) => {

      //已选文件
      const file = ev.target.files[0];

      const preSignalURL = "http://localhost:8080/sqray-keyan/apricot.jpg?AWSAccessKeyId=HYIHVY9WF5S553G80J82&Expires=1667627822&Signature=EaySp82r4SoviPkvKxCefRGi%2Fm4%3D";

      let reader = new FileReader();

      var xhr = new XMLHttpRequest();

      //设置请求
      xhr.open("put", preSignalURL);
      xhr.setRequestHeader("Content-Type", "application/octet-stream")

      //加载文件流
      reader.onload = (buf) => {

        //发送请求
        xhr.send(buf.target.result)

      };

      //读取文件流
      reader.readAsArrayBuffer(file);
    }
  }
}
</script>

 

三、IIS重写URL跨域

        ①、安装【Application Request Routing】

        ②、安装【IISRewrite】

        ③、开启ARR代理

1、选择服务代理设置。

2、开启代理选项。 

          ④、URL重写

 1、添加规则。

2、填写规则。

 3、测试规则。

        ⑤、代理请求源码

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <input type="file"
           id="file"
           @change="handlerChangeFile" />
    <router-view />
  </div>
</template>

<script>

export default {
  name: 'App',
  mounted: () => {

  },
  methods: {

    //文件切换事件
    handlerChangeFile: (ev) => {

      //已选文件
      const file = ev.target.files[0];

      //默认网站地址【http://localhost:8700】
      const preSignalURL = "http://localhost:8700/api/mark.txt?AWSAccessKeyId=HYIHVY9WF5S553G80J82&Expires=1668245368&Signature=QuAt1%2F1VEgYOYR%2FptHwfZJwTAjM%3D";

      let reader = new FileReader();

      var xhr = new XMLHttpRequest();

      //设置请求
      xhr.open("put", preSignalURL);
      xhr.setRequestHeader("Content-Type", "application/octet-stream")

      //加载文件流
      reader.onload = (buf) => {

        //发送请求
        xhr.send(buf.target.result)

      };

      //读取文件流
      reader.readAsArrayBuffer(file);
    }
  }
}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

        ⑥、最后生成配置【可使用配置，省去以上RUL重写配置】

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <!--规则名称、相关属性配置-->
                <rule name="oss" patternSyntax="Wildcard" stopProcessing="true">

                    <!--地址匹配-->
                    <match url="*api/*" />

                    <!--重写配置-->
                    <action type="Rewrite" url="http://192.168.10.100:8082/h3c/{R:2}" logRewrittenUrl="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>