（一）什么是跨域

同源請求就是指協(xié)議名、主機名、端口號三者一樣

跨域請求：是指協(xié)議名、主機名、端口號三者有任何一個不一樣，而且跨域請求是請求發(fā)出去了，服務(wù)器接收并返回了結(jié)果，只是瀏覽器沒有接收響應(yīng)結(jié)果?？缬蛉绻贿M行處理會報錯

（二）axios請求

（1）請求方式

1. xhr方法： new XMLHttpRequest()   xhr.open() xhr.send()
2. jQuery方法： $get $post
3. axios ：（基于Promise風(fēng)格，現(xiàn)在用的較多）
4. fetch：（基于Promise風(fēng)格），fetch的兼容性較差
5. jQuery和axios 是對 xhr方法的封裝，而fetch方法和xhr方法是平級的，都在window對象身上。

（2）如何發(fā)送axios請求

1、在vscode終端輸入命令 npm  axios進行安裝

2、在App.vue中進行引入 import  axios from 'axios'

3、發(fā)送請求

axios.get('url地址').then(

          respone=>{

            console.log('請求成功了',respone.data)

          },

          error=>{

            console.log('請求失敗了',error.message)

          }

（三）配置代理解決跨域問題

原理：設(shè)置一個代理服務(wù)器，它的協(xié)議名、主機名、端口號和前端的一模一樣，這樣前端訪問該代理服務(wù)器就沒有跨域問題了。

當(dāng)該代理服務(wù)器收到前端的請求，再向其他服務(wù)器發(fā)送該請求，獲取數(shù)據(jù)，之后將數(shù)據(jù)返回給前端。

（1）方法一：使用vuecli配置代理服務(wù)器

1、開啟server1服務(wù)器

2、vue.config.js:用來配置腳手架的全局配置，在module.exports中加入如下配置

devServer:{

    proxy:'http://localhost:5000'

    //語法：proxy:'協(xié)議名：//主機名：端口號'

  }

當(dāng)前瀏覽器地址端口號為8080,需要向后端端口號為5000的地址請求數(shù)據(jù)，出現(xiàn)跨域問題，使用代理服務(wù)器

3、在終端安裝axios，在app.vue中引入axios，再發(fā)送get請求

<template>

    <button @click="getStudent">獲取學(xué)生信息</button>

</template>

<script>

import  axios from 'axios'

export default {

    name:'App',  

    methods:{

      getStudent(){

        axios.get('http://localhost:8080/students').then(

          respone=>{

            console.log('請求成功了',respone.data)

          },

          error=>{

            console.log('請求失敗了',error.message)

          }

        )

      }，

    }

}

</script>

4、請求數(shù)據(jù)如下

 5、用vuecli配置代理服務(wù)器的缺點

5.1 當(dāng)請求的資源代理服務(wù)器本身就有，就不會轉(zhuǎn)發(fā)請求，public文件夾中的東西就是代理服務(wù)器的資源。

例如：請求名稱和public文件夾中資源的名稱同名就會返回public中的資源，

請求結(jié)果為

5.2 只能配置一個請求代理服務(wù)器，即只能向一個服務(wù)器轉(zhuǎn)發(fā)請求

(2)方法二

1、開啟兩個服務(wù)器

2、vue.config.js的第二種配置，可以配置多臺服務(wù)器，也不會出現(xiàn)public中同名請求錯資源問題

devServer: {
    proxy: {
      '/xkx': {// '/xkx'請求前綴，表示只要請求前綴是/xkx就走代理
        target: 'http://localhost:5000',
        // 將以xkx開頭的請求，將開頭的/xkx去掉，否則目標服務(wù)器會找不到路徑的
        pathRewrite: { '^/xkx': '' },
        ws: true,//用于支持webscoket

        //用與向目標服務(wù)器說明自己是哪臺服務(wù)器（即配置請求頭host）
        // 如果為false則自己是哪臺服務(wù)器就說是哪臺（host為8080）
        // 如果為true，則目標服務(wù)器是哪臺就說自己是哪臺服務(wù)器（host為5000）
        changeOrigin:true
      },
      // 可以設(shè)置多臺服務(wù)器
      '/kk': {
        target:'http://localhost:5001',
        pathRewrite: { '^/kk': '' },
        ws: true,
        changeOrigin:true
      }
    }
  }

3、App.vue中發(fā)送兩個請求

 methods:{

      getStudent(){

        axios.get('http://localhost:8080/xkx/students').then(

          respone=>{

            console.log('請求成功了',respone.data)

          },

          error=>{

            console.log('請求失敗了',error.message)

          }

        )

      },

      getCars(){

        axios.get('http://localhost:8080/kk/cars').then(

          respone=>{

            console.log('請求成功了',respone.data)

          },

          error=>{

            console.log('請求失敗了',error.message)

          }

        )

      }

    }

4、請求數(shù)據(jù)結(jié)果

 到此這篇關(guān)于Vue解決ajax跨域的問題的文章就介紹到這了,更多相關(guān)Vue解決ajax跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論