vue 解決跨域問題(開發環境)

2021-10-14 06:01:19 字數 1148 閱讀 7091

同源:網域名稱,協議,埠均相同

不同源就是跨域,比如你的前端為localhost:9528,後端為localhost:8080,此時前端去訪問後端介面就會產生跨域問題,因為埠不同。

跨域問題前後端都可以解決,這裡僅提供vue的前端跨域解決方案:

前端vue.config.js配置如下,然後保證在你訪問後端介面時加個字首/api

devserver:

, proxy:}}

}

以下例子訪問介面的時候都會保證訪問的路徑為:/api/about/first,包含字首/api

axios.

get(

'/api/about/first'

,function

(res)

)

request.js:baseurl這裡不寫 baseurl

const service = axios.

create

()

api/***.js: 在介面這裡加字首

import request from

'@/utils/request.js'

export

default)}

}

vue.config.js:

devserver:

, proxy:}}

}

request.js:baseurl這裡加字首

const service = axios.

create

()

api/***.js:這裡不加字首

import request from

'@/utils/request.js'

export

default)}

}

vue.config.js:

devserver:

, proxy:}}

}

Vue 生產環境解決跨域問題

一.前言 第一次寫vue專案,開發完成。打包上線後,一訪問,發現訪問後端的請求全部報404.我就納悶了,跨域問題我已經解決了,怎麼就報錯了。查閱資料,得知我解決的跨域僅適用於開發環境。二 最簡單直接方法 在main.js 中加入如下 import axios from axios vue.proto...

vue解決跨域問題

開發模式 要知道,跨域這個行為是瀏覽器禁止的,但是服務端並不禁止。使用proxytable的原理就是將網域名稱傳送給本地的伺服器,再由本地的伺服器去請求真正的伺服器。開啟config index.js,修改dev裡的proxytable proxytable 當你在別的頁面請求時只要是 你只需要 x...

Vue 解決跨域問題

報錯 解決 專案根目錄下新建vue.config.js module.exports 個人理解 訪問 register的時候,相當於是訪問本地的http localhost 8080 register 然後這個proxy,充當於乙個請求 的作用 它攔截了http localhost 8080 reg...