1. 程式人生 > >vue之 跨域請求代理與axios傳參

vue之 跨域請求代理與axios傳參

一:跨域請求代理

1:開啟config/index.js

module.exports{
    dev: {
    }
}

在這裡面找到proxyTable{},改為這樣:

proxyTable: {
      '/api': {
        target: 'http://121.41.130.58:9090',//設定你呼叫的介面域名和埠號 別忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''//這裡理解成用‘/api’代替target裡面的地址,後面元件中我們掉介面時直接用api代替 比如我要呼叫'http://40.00.100.100:3002/user/add',直接寫‘/api/user/add’即可
        }
      }
    }
2:在需要調介面的元件中這樣使用:
axios.post('/api/yt_api/login/doLogin',postData)
    .then(function (response) {
        console.log(1)
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    })
 注意:原介面:http://http://121.41.130.58:9090/yt_api/login/doLogin

      頁面呼叫:http://localhost:8081/api/yt_api/login/doLogin ——這裡多了一個/api/不是多餘的,不要刪

二:axios傳參

1:Vue官方推薦元件axios預設就是提交 JSON 字串,所以我們要以json字串直接拼接在url後面的形式,直接將json物件傳進去就行了

let postData = {
    'companyCode':'tur',
    'userName':'123456789123456789',
    'password':'123456'
}
axios.post('/api/yt_api/login/doLogin',postData)
    .then(function (response) {
        console.log(1)
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
這裡我們將postData這個json物件傳入到post方法中,頁面中的形式為:

2:以key:val的形式傳參

let postData = qs.stringify({
    companyCode:'tur',
    userName:'123456789123456789',
    password:'123456'
})

我們需要對這個json物件操作,這裡的qs你需要先安裝

npm install qs

再匯入

import qs from 'qs'
面中的形式為:

相關推薦

vue 請求代理axios

一:跨域請求代理1:開啟config/index.jsmodule.exports{ dev: { } }在這裡面找到proxyTable{},改為這樣:proxyTable: { '/api': { target: 'http:/

vue.js 請求代理

一:跨域請求代理 1:開啟config/index.js,增加proxyTable內容 ​ module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPu

vue-cli3.0 axios請求代理配置及埠修改

1.安裝 axios vue add axios 2.專案根目錄下新建 vue.config.js // vue.config.js module.exports = { devServer:

vue-cli(vue2.x)配置請求代理,設定請求

1、在config/index.js設定配置檔案,跨域配置代理 (預設裡面內容為空,我們需要加入對跨域介面的配置) 根據介面的不同設定的請求頭和主機也不同,自己按照格式要求進行配置即可。 如上圖配置好了之後,'/apis/getSongLyric'為自定義的axios請求路徑,自己根據相

Python Tornado請求Options請求

問題背景 公司的專案是前後端分離,前端Vue+後端JavaSpringBoot為主,部分功能是PythonTornado,那麼需要支援一個是跨域以及Options請求。 Option請求 只需要跟處理get一樣處理options請求就可以了。vue一般需要訪問options方

Vue專案設定,axios不成功的一個小問題( Vue CLI3請求Vue proxyTable配置,Access-Control-Allow-Origin )

Vue專案,因為前後端分離,所以在請求後端介面時,時常遇到跨站問題, 2、如果前後端部署在同一個域名,就不會有跨域問題,但一般是生產環境部署是同一個域名下,但在開發環境時,並不是同域名呀,所以開發時呼叫介面返回類似“No 'Access-Control-Allow-Or

vue.js 請求 fetch / axios

跨域請求配置 在vue專案下 找到  config  > index.js 檔案;修改 index.js 檔案下的 proxyTable 物件的內容;如下 proxyTable: { '/api': { //

Django請求同源策略

同源策略: 首先基於安全的原因,瀏覽器是存在同源策略這個機制的,同源策略阻止從一個源載入的文件或指令碼獲取或設定另一個源載入的文件的屬性。 而如果我們要跳過這個策略,也就是說非要跨域請求,那麼就需要通過JSONP或者CORS來實現了。   一個源的定義   如果兩個頁面的協議,

Vue實現請求

實現跨域請求有兩種方式: 1、fetch (1)在App.vue中使用created方法建立fetch,將域名及方法等建立,如下圖 (2)在config配置檔案中的index.js中的跨域區域中寫入如下程式碼: (3)完善資訊,將介面相應的需求補充完整

4、CORS請求限制解決(預請求

test.html <script> fetch('http://localhost:8887/', { method: 'PUT', headers: { 'X-Test-Cors': '123' } }) </s

請求——jsonpcors

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type

008-vue對ajax請求介面封裝(axios+jsonp)

/** * 此檔案對axios 於 json請求伺服器進行了封裝 * https://github.com/axios/axios * https://github.com/webmodules/jsonp */ import axios from 'axios';

解決ueditor請求時圖片上不了及圖片列表回顯路徑問題

可跳過直接看後面的重點 1、測試環境:  1. 後端部署 基於Win10+Wampserver64  2

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

port acc stringify all menu turn esp public token 一、點擊一次按鈕 會發送兩次請求的問題 第一個請求 Method是OPTIONS 第二個請求 Method是POST 後臺過濾器也是檢測出訪問了兩次,但

vue 使用axios 請求數據的問題

rom 不想 需要 ole 人員 信息 vue 沒有 main axios默認是沒有jsonp 跨域請求的方法的。一般來說流行的做法是將跨域放在後臺來解決,也就是後臺開發人員添加跨域頭信息。 例如java中的 header,response.setHeader("Acce

vue-cli項目本地代理實現請求

con 跨域 請求 AR url 本地 dex ams gin   使用 Vue-cli 創建的項目,開發地址是 localhost:8080,需要訪問非本機上的接口http://10.1.0.34:8000/queryRole。不同域名之間的訪問,需要跨域才能正確請求。跨

Vue前端服務代理實現請求資料。

開發中請求真實伺服器資料,配置伺服器代理實現跨域。 vue-cli + webpack 構建的專案 再 ./config/index.js 檔案中配置 proxyTable: { '/api':{ target: 'http://請求的伺服器地址',

vue-cli反向代理請求

最近一直在通過 webpack + Vue-CLI 來學習,想跨域呼叫介面資料。奈何因同源策略,瀏覽器限制,導致資源請求一直不成功。 現在整理一下思路 — — 跨域: 指瀏覽器受同源策略限制,不能夠訪問不同域的頁面(指令碼)。 同源策略限制已下行為: LocalStorage

$Django 問題(同源策略) vue專案(axios請求資料)

1 跨域問題 #同源策略 #本站的只能請求本站域名的資料 #CORS實現(跨域資源共享) #實現CORS通訊的關鍵是伺服器。只要伺服器實現了CORS介面,就可以跨源通訊。 #CORS基本流程 #1_CORS請求分成兩類:簡單請求(simple request)和非簡

Vue前端配置代理實現請求

跨域的解決方法:         *設定讓伺服器允許跨域         *前端配置代理實現跨域請求 本文介紹前端配置代理實現跨域請求:  在專案config資料