1. 程式人生 > >解決vue+webpack專案介面跨域問題

解決vue+webpack專案介面跨域問題

1、config資料夾下index.js檔案設定proxyTable(proxyTable後面的host可以設定也可以保持預設的localhost)

proxyTable: {
  '/api': {
    target: 'http://10.xx.xx.xx:8080/renter-server', // 開發環境
    // target: 'http://10.xx.xx.xx:8080/renter-server', // 生產環境介面
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/'
    }
  }
},
host: '自己的IP或者預設的localhost', // can be overwritten by process.env.HOST
  1. 在使用axios請求的時候把所有介面的'http://10.xx.xx.xx:8080/renter-server'部分替換為'/api'

例如我們專案裡axios的配置資料夾(自定義的)api下面的index.js檔案裡有如下配置

let env = process.env.NODE_ENV
let BASE_1, BASE_2
if (env === 'production') {// 生產環境 正式打包使用
  BASE_1 = BASE_2 = CONFIG.apiHost
} else if (env === 'development') {// 開發環境 本地測試使用
  BASE_1 = BASE_2 = '/api'
}

再用BASE1拼接進行請求

axios.get(BASE_1 + '/pc/getHouseList', {params: params})

相關推薦

解決vue+webpack專案介面問題

1、config資料夾下index.js檔案設定proxyTable(proxyTable後面的host可以設定也可以保持預設的localhost) proxyTable: { '/api': { target: 'http://10.xx.xx.xx:8080

解決vue開發請求資料的問題(基於瀏覽器的配置解決)

    在用vue做前端開發的時候,因為一般跑vue使用的webpack自帶的node服務,而我們實際要使用的資料確是後臺伺服器上的,所以這就涉及到伺服器請求跨域的問題。本來在諸如axios之類的網路請求引數裡面配置 withCredentials: true, 就可以解

axios解決呼叫後端介面問題

vue-cli通過是本地代理的方式解決介面跨域問題的。但是在vue-cli的預設專案配置中這個代理是沒有配置的,如果現在專案中使用,必須手動配置config/index.js檔案 ... proxyTable: { '/api': { //將www.exaple.com印射為/apis

使用vue-lazyload解決Vue+Webpack專案的圖片載入問題

一下討論問題的前提是專案已經使用了file-loader和url-loader,還沒首先說明問題的來源,在使用Vue的迴圈呈現有圖片的列表時,用v-for="item in items",新增圖片的引用資源時,如果這樣

vue-cli+webpack前端使用後臺介面問題的多種解決及其原理和產生原因

  解決方式:        基於vue-cli 2.0版本,下載好工程後,找到config資料夾裡的index.js檔案 , 然後就是把上圖的target改成你的介面地址前面的那部分就好了,底下的^/api就是把前面那些替代

webpack代理實現vue或者react專案問題

webpack是一款很好用的打包工具,同時它還可以建立一個本地伺服器,是你的前端程式碼可以在伺服器的環境下執行。 proxy (1)代理路由 proxy是webpack中devServer的一個配置,主要是用來代理某些URL的。 proxy: { "/a

Vue專案整合ueditor。解決圖片上傳及問題

1:下載ueditor下來,放在vue專案中的static資料夾下2:建立ueditor編輯介面3:椰~~~~~此時已經可以使用了但是你會發現(黑人臉)what the fuck??????????看下面    如果你只是搞前端介面,那就到此結束不用往下看了,剩下的是給苦逼後

vue : 本地調試問題的解決辦法:proxyTable

settings sat tell emp 相同 debug conf sts zip 本來我是不想寫的,但為了加深印象還是寫一寫吧。 ./config/index.js module.exports = { dev: { // Paths

vue+webpack專案在iOS微信端偶爾出現白屏,重新整理又能重新進入的解決方案,在Android上不會出現

           問題描述:微信公眾號內部的專案,我使用的是vue+webpack的方式,路徑配置正確的情況下,在Chrome上執行正常,執行npm run build放在測試伺服器上,配置好相應入口,通過微信訪問,在Android機

mac下安裝nginx並且利用nginx解決本地前端工程訪問後端介面問題

安裝nginx 環境:macos mac環境下是使用的brew安裝nginx 1.終端輸入 brew search nginx 查詢nginx 2.安裝指令 brew install nginx 安裝完成後會在終端中看到一些nginx的安裝資訊 3.配置nginx 3.1 終端下進入目

vue 音樂App QQ音樂搜尋列表最新介面設定方法

 在 webpack.dev.config.js中 前端精品教程:百度網盤下載 ? 1 2

html用ajax請求伺服器後端java介面問題解決

在html頁面加入以下程式碼: <meta http-equiv="Access-Control-Allow-Origin" content="*"> 在java後端程式碼的介面中加入 response.setHeader("Access-

vue本地呼叫伺服器介面問題,也就是localhost:8080呼叫http://10.100.55.110:8000/api/userauth的問題

其實,只需要配置vue的config/index.js檔案就行了,其他的axios的baseURL不用管,不寫。程式碼如下: // see http://vuejs-templates.github.io/webpack for documentation. 'use s

SpringBoot:SpringBoot專案問題的解決

SpringBoot:SpringBoot專案中跨域問題的解決 出於安全原因,瀏覽器禁止對駐留在當前源之外的資源進行AJAX呼叫。 跨源資源共享(CORS)是大多數瀏覽器實現的W3C規範,允許以靈活的方式指定授權的跨域請求型別,而不是使用IFrame或JSON

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

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

Vue專案的幾種方式

經常使用vue + webpack搭建專案,但在請求某些json資料時存在跨域問題,此時有幾種修改方法 1. 修改後臺header, 但如果只是請求外部資料,是沒法修改後臺配置的 1 header('Access-Control-Allow-Origin:*');//允許所有來源

前端CORS請求介面問題解決方案 (古月)

先配置Nginx 先舉例 以下是我們常用的nginx站點配置(PHP網站為例) server { listen 監聽埠; server_name 域名部分; set $root_path 目錄部分; root $root_path; i

vue專案處理及釋出部署

目錄 前言 1.開發模式下的跨域處理 2.打包釋出和後臺服務一塊部署 3.使用nginx釋出前端專案 前言        本篇主要是記錄下再開發vue專案時遇到的跨域問題,那麼什麼是跨域呢,可以簡單理解為,我請求A服務的資源,A服務

vue proxyTable 介面請求問題處理

1、前言 在使用vue開發移動端app時,使用http請求獲取介面資料時,出現vue proxyTable介面跨域請求問題 2、vue http請求程式碼如下: this.$http.p

vue2 前後端分離專案ajaxsession問題解決

最近學習使用vuejs前後端分離,重構一個已有的後臺管理系統,遇到了下面這個問題: 實現跨域請求時,每次ajax請求都是新的session,導致無法獲取登入資訊,所有的請求都被判定為未登陸。 1、 vuejs ajax跨域請求 最開始使用的是vue-resource