vue-cli配置proxyTable 跨域請(qǐng)求

caoym 發(fā)布于2019-08-23 17:00 / 2594人閱讀

摘要：本地服務(wù)啟動(dòng)端口，項(xiàng)目啟動(dòng)端口，當(dāng)前端用戶提交登錄信息到后端，便產(chǎn)生跨域，可以配置解決跨域問(wèn)題一進(jìn)入項(xiàng)目下的文件，添加接口的域名如果是接口，需要配置這個(gè)參數(shù)如果接口跨域，需要進(jìn)行這個(gè)參數(shù)配置此處的設(shè)為二在前端發(fā)送請(qǐng)求頁(yè)面，設(shè)置請(qǐng)求三啟動(dòng)

本地express服務(wù)啟動(dòng)端口3000， vue-cli項(xiàng)目啟動(dòng)端口8080，當(dāng)前端用戶提交登錄信息到后端，
便產(chǎn)生跨域，可以配置 proxyTable 解決跨域問(wèn)題
一：進(jìn)入vue-cli項(xiàng)目下的config/index.js 文件，添加

   proxyTable: {
  "/api": {
    target: "http://xxxxxx.com", // 接口的域名
    // secure: false,  // 如果是https接口，需要配置這個(gè)參數(shù)
    changeOrigin: true, // 如果接口跨域，需要進(jìn)行這個(gè)參數(shù)配置
    pathRewrite: {
      "^/api": ""
    }
  }
},

此處的target 設(shè)為 "http://localhost:3000/"

二：在前端發(fā)送請(qǐng)求頁(yè)面，設(shè)置請(qǐng)求url

   this.$axios.post("/api/checklogin",{
        username:that.ruleForm.username,
        password:that.ruleForm.password
      })

三啟動(dòng)本地node服務(wù)，啟動(dòng)vue項(xiàng)目，發(fā)送請(qǐng)求數(shù)據(jù)，控制臺(tái)查看，獲取數(shù)據(jù)成功則配置正確

GPU云服務(wù)器云服務(wù)器跨域請(qǐng)求跨域請(qǐng)求方式 javascript跨域請(qǐng)求 jquery跨域請(qǐng)求

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/103658.html

相關(guān)文章

vue-cli項(xiàng)目中的proxyTable跨域問(wèn)題小結(jié)

摘要：由兩部分組成回調(diào)函數(shù)和數(shù)據(jù)。回調(diào)函數(shù)是當(dāng)響應(yīng)到來(lái)時(shí)應(yīng)該在頁(yè)面中調(diào)用的函數(shù)。回調(diào)函數(shù)的名字一般是在請(qǐng)求中指定的。動(dòng)態(tài)創(chuàng)建標(biāo)簽，設(shè)置其，回調(diào)函數(shù)在中設(shè)置在頁(yè)面中，返回的作為參數(shù)傳入回調(diào)函數(shù)中，我們通過(guò)回調(diào)函數(shù)來(lái)來(lái)操作數(shù)據(jù)。什么是跨域？同源策略規(guī)定了如果兩個(gè) url 的協(xié)議、域名、端口中有任何一個(gè)不等，就認(rèn)定它們跨源了。跨域的解決方式有哪幾種？ 1.JSONP 是 JSON with ...

lidashuang 2019-08-26 11:40 評(píng)論0 收藏0
vue-cli項(xiàng)目中的proxyTable跨域問(wèn)題小結(jié)

摘要：由兩部分組成回調(diào)函數(shù)和數(shù)據(jù)。回調(diào)函數(shù)是當(dāng)響應(yīng)到來(lái)時(shí)應(yīng)該在頁(yè)面中調(diào)用的函數(shù)。回調(diào)函數(shù)的名字一般是在請(qǐng)求中指定的。動(dòng)態(tài)創(chuàng)建標(biāo)簽，設(shè)置其，回調(diào)函數(shù)在中設(shè)置在頁(yè)面中，返回的作為參數(shù)傳入回調(diào)函數(shù)中，我們通過(guò)回調(diào)函數(shù)來(lái)來(lái)操作數(shù)據(jù)。什么是跨域？同源策略規(guī)定了如果兩個(gè) url 的協(xié)議、域名、端口中有任何一個(gè)不等，就認(rèn)定它們跨源了。跨域的解決方式有哪幾種？ 1.JSONP 是 JSON with ...

張金寶 2019-07-25 14:10 評(píng)論0 收藏0
vue-cli本地環(huán)境API代理設(shè)置和解決跨域

摘要：我們將引入我們配置的中，再將修改如下路徑你們改下將印射為接口域名如果是接口，需要配置這個(gè)參數(shù)是否跨域需要的之后不管是生產(chǎn)環(huán)境，還是開(kāi)發(fā)環(huán)境，都不用再修改我們的請(qǐng)求地址了。前言我們?cè)谑褂胿ue-cli啟動(dòng)項(xiàng)目的時(shí)候npm run dev便可以啟動(dòng)我們的項(xiàng)目了，通常我們的請(qǐng)求地址是以localhost:8080來(lái)請(qǐng)求接口數(shù)據(jù)的，localhost是沒(méi)有辦法設(shè)置cookie的。我們可以...

lakeside 2019-08-20 19:09 評(píng)論0 收藏0
簡(jiǎn)單設(shè)置，解決使用webpack前后端跨域發(fā)送cookie的問(wèn)題

摘要：最近用來(lái)做項(xiàng)目，用來(lái)做前端自動(dòng)化構(gòu)建。會(huì)在本地搭建一個(gè)服務(wù)器，在和后端調(diào)試的時(shí)候，就會(huì)涉及到跨域的問(wèn)題。要向后端發(fā)送，前端也需要有相應(yīng)的配置。另外還要將設(shè)為。最近用vue來(lái)做項(xiàng)目，用webpack來(lái)做前端自動(dòng)化構(gòu)建。webpack-dev-server會(huì)在本地搭建一個(gè)服務(wù)器，在和后端調(diào)試的時(shí)候，就會(huì)涉及到跨域的問(wèn)題。剛開(kāi)始時(shí)，沒(méi)有用vue-cli來(lái)構(gòu)建項(xiàng)目，而是參考了github上...

wwq0327 2019-08-21 14:25 評(píng)論0 收藏0