Vue+axios+spring boot遇到的問題(跨域請求)

一、點擊一次按鈕 會發送兩次請求的問題

 

第一個請求 Method是OPTIONS 

第二個請求 Method是POST

后台過濾器也是檢測出訪問了兩次，但是是偶爾才會重復訪問。

這是因為 跨域請求導致 每次請求前都會先發送一個空的請求檢查服務器，

可以在后台過濾器加個這個：

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response1 = (HttpServletResponse) response;
        HttpServletRequest request1 = (HttpServletRequest) request;
        response1.setHeader("Access-Control-Allow-Origin", "*");
        response1.setHeader("Access-Control-Allow-Credentials", "true");
        response1.setHeader("Access-Control-Allow-Methods", "*");
        response1.setHeader("Access-Control-Allow-Headers", "Content-Type,Access-Token");
        response1.setHeader("Access-Control-Expose-Headers", "*");

        if (request1.getMethod().equals( RequestMethod.OPTIONS.toString())){
            System.out.println("-----檢查------");
            return; }
        chain.doFilter(request, response);
    }

 

二、跨域請求問題

添加過濾器，過濾器里面添加上面的代碼可以解決跨域請求問題

三、axios訪問接口 后台讀取的數據都是空的問題 如下

前台：

<script>
  export default {
    data() {
      return {
        formItem: {
          menu_name: '',
          menu_info: '無',
          menu_level: '',
          menu_state: true,
          app_version: [],
          operate_user: 'admin',
          menu_superior:'-'
        },
        app_versions: [
          {
            value: '100',
            label: '1.0.0'
          },
          {
            value: '101',
            label: '1.0.1'
          },
          {
            value: '102',
            label: '1.0.2'
          },
          {
            value: '110',
            label: '1.1.0'
          }
        ]
      }
    },
    methods: {
      addMenu: function (form) {
        console.log(JSON.stringify(form))

        this.$http.post('http://localhost:8888/api/manager/addMenu', {

          data:JSON.stringify(form)
        })
          .then(function (res) {
            if (res.data.no == '1') {
              alert('ok')
            }
          })
          .catch(function (err) {
            console.log('----失敗-----');
          });

      }

    }

  }
</script>

 

 

后台日志

可以看到 前台明明傳過去了，后台也能接收到，但是為什么全是null呢，搞了半天這里出問題了：

 

  addMenu: function (form) {
        console.log(JSON.stringify(form))

        this.$http.post('http://localhost:8888/api/manager/addMenu', (form))
          .then(function (res) {
            if (res.data.no == '1') {
              alert('ok')
            }
          })
          .catch(function (err) {
            console.log('----失敗-----');
          });

      }

 

其實這里不用轉json，直接傳對象就可以，然后看下后台：

 

 這樣就對了。