vue-前后端分离问题

Bertha 。 2023-05-31 07:04 27阅读 0赞

前后端分离的项目第一个遇到的拦路虎应该就是 前后端分离所导致的跨域问题了。在vue.js里面，前后端分离里面，前端可以做的事情有：

1.修改 config/index.js里面的proxy

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70][]

// Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
        proxyTable: {
          '/ssms':{
            target:'http://localhost:8080', // 你请求的第三方接口
            //target: 'http://10.61.129.85:8080',
            changeOrigin:true,
            pathRewrite:{
                '^/ssms':''
            },
        }
        },

在main.js里面

import Axios from 'axios'
    //保持客户端访问服务器端时，保持session有效
    Axios.defaults.withCredentials = true;
    Axios.defaults.baseURL = '/ssms'
    Axios.defaults.headers.post['Content-Type'] = 'application/json';

接收后端传过来的验证码图片，用application/json接收，虽然前端接收到了，但是显示不出来这个图片，

在试了n次，找了n多方法之后，才发现这样才能接收

好像是用，vue通用的this.$axios.get 或者 post 这样的方式是得不到从后端传过来的一个图片的

this.$axios({
            method: "POST",
            url: "/ssms/getCheckCode",
            responseType: "blob"
          })
            .then(res => {
              let blob = new Blob([res.data], { type: "data:image/jpeg;base64" });
              let url = window.URL.createObjectURL(blob);
              this.codeImg = url;
            })
            .catch(err => {
              console.log(err);
            });
        },

在这些东西做完之后，如果还存在跨域问题，那就属于后端需要解决的问题了

之前做过的一个vue+SSM的酒店预订管理系统就遇到前后端分离的问题

前后端登录注册携带COOKIE跨域问题确实是一个挺难搞的问题。

在前端做好自己的努力之后呢，现在就需要后端做出一定的努力了。

这是后端修改的地方，原理虽然不是很清楚。

<mvc:cors>
            <mvc:mapping path="/ssms/**"
            allowed-origins="http://localhost:9001"
            allow-credentials="true"
            allowed-methods="*"
            allowed-headers="*"></mvc:mapping>
        </mvc:cors>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]: /images/20230531/bfeb940082ac41bf9d1850e6dfa95c8a.png