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

來源:互聯網
上載者:User

標籤:ken   method   als   遇到   version   override   boot   []   eve   

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

 

第一個請求 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,直接傳對象就可以,然後看下後台:

 

 這樣就對了。

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.