vue修改proxyTable解決跨域請求,報404的問題及解決

更新時間：2023年07月04日 09:51:20 作者：bdmh

這篇文章主要介紹了vue修改proxyTable解決跨域請求,報404的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue修改proxyTable解決跨域請求，報404解決

環(huán)境

vue前端和后端接口部署在同一臺機器。

vue服務(wù)部署在 http://localhost:8081，后臺服務(wù)部署在 http://localhost:8080，可以看到端口是不一樣的，在vue通過以下方式請求：

export default {
    name:'Condition',
    data(){
        return{
            options:[]
        }
    },
    created:function(){
        this.getdata();
    },
    methods:{
        getdata(){
            this.$axios({
                method:'get',
                url:'http://localhost:8080/college/getcollege'
                }).then(resp => {
                    this.options = resp.data.data.list;
                    console.log(resp.data);        
                }).catch(resp => {
                    console.log('請求失?。?+resp.status+','+resp.statusText);
                });
        }
    }
}

因為端口不一致，axios就會認(rèn)為是跨域了，所以就會報錯：

Access to XMLHttpRequest at 'http://localhost:8080/college/getcollege' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. [http://localhost:8081/#/]

這里只介紹通過修改config中的index.js文件中的proxyTable的配置去解決的方法。在網(wǎng)上隨便搜一下，基本都是如下的內(nèi)容：

        proxyTable: {
            "/api": {
                target: "http://localhost:8080",
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },

修改后，絕大部分人都會遇到404的錯誤，如下：

the server responded with a status of 404 (Not Found) [http://localhost:8081/college/getcollege

奇怪吧，明明設(shè)置了代理，怎么沒有生效呢？不是方法不對，而是沒有理解proxyTable中節(jié)點的意義。

其中的“api”節(jié)點，這是路由，系統(tǒng)會去根據(jù)這個匹配你的地址，匹配上才會生效，proxyTable中可以指定多個路由，一開始會認(rèn)為這個是規(guī)定格式，所以都不會去修改，除非你的api部署地址是這樣的“http://localhost:8080/api/*”，恭喜你，你的問題可能解決了，但是根據(jù)我的地址是“http://localhost:8080/college/getcollege”，就完蛋了，那么該怎么改，如下：

        proxyTable: {
    //碰到college路由就會起作用了
            "/college": {
                target: "http://localhost:8080",
                changeOrigin: true,
    //重定向，一般可以不用寫，或者值寫出空''
                pathRewrite: {
                    '^/college': '/college'
                }
            }
        },

OK，問題解決。

vue的proxyTable跨域處理

當(dāng)我們請求的地址出現(xiàn)不符合同源策略的時候，就會出現(xiàn)跨域的問題，這里僅對在vue 項目中使用axions請求跨域做記錄

跨域報錯截圖

在這里插入圖片描述

案例：請求"https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=10"中的數(shù)據(jù)

分析

問號（?）之前的為我們要請求的后端地址，包含協(xié)議、域名、地址等等問號（?）之后的內(nèi)容為我們需要提交的參數(shù)，參數(shù)之間用&連接

解決方案

1、配置跨域

在項目中與src同級下有一個config文件夾，打開這個文件夾中的index.js文件

在這里插入圖片描述

在index.js文件的 module.exports 中的 dev 中的 proxyTable 進(jìn)行跨域配置

module.exports = {
  dev: {
  ...
    proxyTable: {
      '/api': {  //這里的/api，就是我們在target里寫的要請求的后端接口
        target: 'https://cn.bing.com/', 
        //要請求的后端接口地址，一般寫多個數(shù)據(jù)接口的共同內(nèi)容，后面的地址根據(jù)請求數(shù)據(jù)的不同，在請求的時候再拼接上就好
        changeOrigin: true, //是否允許跨越
        pathRewrite: {
          '^/api': '', //重寫,一般情況下不需要
        }
      }
    },
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be 
  },
  ...
}

2、使用axios請求數(shù)據(jù)

methods:{
getData(){
axios
    .get("/api/HPImageArchive.aspx", {   
       params: {
         format: "js",
         idx: 0,
         n: 1
       }
     })
     .then(function(response) {
       console.log(response);
     })
     .catch(function(error) {
       console.log(error);
     });
 }
}
 //get:請求方式 
 // "/api/HPImageArchive.aspx"：請求地址，這里的api一定不能忘記，它代表著我們在請求地址前面部分
 // params: 我們需要帶上的參數(shù)就寫這個對象中
 //.then： 請求成功之后，要執(zhí)行的代碼塊
 //.catch： 請求失敗之后，需要執(zhí)行的代碼塊

注意事項在配置好跨域之后，請求的時候，一定不要忘記在前面加上/api如果有修改congfig中的配置，一定記得重啟服務(wù)，否則你的修改瀏覽器可能不會給于響應(yīng)，讓你白忙活半天如果自己覺得都沒有問題還一直不成功，記得打開network進(jìn)行查看，不要一味的盯著自己的代碼和報錯在network中，可以查看自己的請求地址是否有誤，需要攜帶的參數(shù)是否有帶上，以及參數(shù)是否正確

在這里插入圖片描述