亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue修改proxyTable解決跨域請(qǐng)求,報(bào)404的問(wèn)題及解決

 更新時(shí)間:2023年07月04日 09:51:20   作者:bdmh  
這篇文章主要介紹了vue修改proxyTable解決跨域請(qǐng)求,報(bào)404的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue修改proxyTable解決跨域請(qǐng)求,報(bào)404解決

環(huán)境

vue前端和后端接口部署在同一臺(tái)機(jī)器。

vue服務(wù)部署在 http://localhost:8081,后臺(tái)服務(wù)部署在 http://localhost:8080,可以看到端口是不一樣的,在vue通過(guò)以下方式請(qǐng)求:

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('請(qǐng)求失?。?+resp.status+','+resp.statusText);
                });
        }
    }
}

因?yàn)槎丝诓灰恢?,axios就會(huì)認(rèn)為是跨域了,所以就會(huì)報(bào)錯(cuò):

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/#/]

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

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

修改后,絕大部分人都會(huì)遇到404的錯(cuò)誤,如下:

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

奇怪吧,明明設(shè)置了代理,怎么沒(méi)有生效呢?不是方法不對(duì),而是沒(méi)有理解proxyTable中節(jié)點(diǎn)的意義。

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

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

OK,問(wèn)題解決。

vue的proxyTable跨域處理

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

跨域報(bào)錯(cuò)截圖

在這里插入圖片描述

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

分析

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

解決方案

1、配置跨域

在項(xiàng)目中與src同級(jí)下有一個(gè)config文件夾,打開這個(gè)文件夾中的index.js文件

在這里插入圖片描述

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

module.exports = {
  dev: {
  ...
    proxyTable: {
      '/api': {  //這里的/api,就是我們?cè)趖arget里寫的要請(qǐng)求的后端接口
        target: 'https://cn.bing.com/', 
        //要請(qǐng)求的后端接口地址,一般寫多個(gè)數(shù)據(jù)接口的共同內(nèi)容,后面的地址根據(jù)請(qǐng)求數(shù)據(jù)的不同,在請(qǐng)求的時(shí)候再拼接上就好
        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請(qǐng)求數(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:請(qǐng)求方式 
 // "/api/HPImageArchive.aspx":請(qǐng)求地址,這里的api一定不能忘記,它代表著我們?cè)谡?qǐng)求地址前面部分
 // params: 我們需要帶上的參數(shù)就寫這個(gè)對(duì)象中
 //.then: 請(qǐng)求成功之后,要執(zhí)行的代碼塊
 //.catch: 請(qǐng)求失敗之后,需要執(zhí)行的代碼塊

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

在這里插入圖片描述

總結(jié)

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論