vue 中Java后端生成阿里oss临时签名前端上传_跨域

1.发布vue项目。

   在VSCode的终端下运行代码命令，会在程序根目录得到一个dist的文件夹 ，iis中就发布这个文件夹。

npm run build

2.先IIS正常发布dist文件夹网站，打开浏览器能浏览算第一步成功。

解决跨域

跨域说的是同源策略：协议//ip:端口  只要一个不一样都不能请求。

解决跨域：jsonp,代理服务器，cors

3.开发环境：由于在VSCode中Vue-cli 脚手架 帮我们做了代理服务器所以可以直接调试运行。

但是在run build 后这个就不在起作用，所以需要重新配置.

devServer: {
    proxy: {
      '/api': {//拦截以api开头的请求
        target: 'http://172.16.6.133:83',//接口地址
        pathRewrite:{'^/api':''},//替换路径中的/api
        ws: true,//websoket
        changeOrigin: true,//允许跨域
      },
    }
  }

4.生产环境：一般情况下Vue项目可以发布在nginx上 或者 iis 上。

5.下面接着解决iis中发布后，跨域的问题：

6.下载requestRouter_amd64.msi ，rewrite_amd64_en-US.msi   后安装， 

7.重新打开iis 点击iis根节点右边会多一个【Application Request Routing Cache 】双击进去点击右边的Server Proxy Settings..   然后 勾上 Enable proxy 在点击右边的应用。

vue 中Java后端生成阿里oss临时签名前端上传_javascript_02

vue 中Java后端生成阿里oss临时签名前端上传_vue.js_03

8.点击发布的vue项目右边会有一个【URL重写】双击进入后，右击[添加规则] 随便取个名称，

与模式匹配     使用:通配符    模式：*api/*

重写    重写URL:http://172.16.6.133:83/{R:2} 这里写真实的接口地址 只替换你的ip端口     勾上停止处理后规则   其他不用理，后点击应用

vue 中Java后端生成阿里oss临时签名前端上传_代理服务器_04

9.关于axios请求代码：

  由于区分开发和生产环境，开发环境用vue自带的代理服务器，生产需要自己配置，那在开发和发布的请求代码就不一样。

开发环境   地址写的是localhost

axios.get('http://localhost:8080/api/Home/GetStudents?name=123').then(
        (response) => {
          alert((this.Message = response.data));
        }, //成功回调
        (error) => {
          alert((this.Message = error.message));
        } //失败回调
      );

生产环境  地址是iis发布的项目地址 172.16.6.133:8051

axios.get('http://172.16.6.133:8051/api/Home/GetStudents?name=123').then(
        (response) => {
          alert((this.Message = response.data));
        }, //成功回调
        (error) => {
          alert((this.Message = error.message));
        } //失败回调
      );

这也就是说 在实际开发中需要用变量或者配置来进行区分使用，方便切换。

IIS这个url代理重写的意思是：当你请求我发布的这个地址，我就会帮你重写到你配置的地址中去，api 是用来区分 去哪个接口地址请求数据。